Pretty simple question-- just wondering if there is some css property I can add to a h1/h2/h3 to allow the words beyond the specified width to wrap.

like:

this is a heading and its getting pretty long but it can go onto the next line, so no worries about going past the width set wheeee!

Thanks for any tips! :)

  • PS- If they are supposed to wrap automatically, mine don't. They extend some past the specified width, then wrap. Shouldn't it wrap once it reaches the set width? Tiffany S almost 8 years ago

5 answers

Marcel 57
1
point

Hi Tiffany.

Ever heard of Hyphenator? It's some great js script who may help you getting this done!

Answered almost 8 years ago by Marcel
0
points

If you want your heading to wrap in the middle of a word like thi- s, Then you should put shy hyphens between each letter of the word to be wrapped. For example you heading is

This heading is way way toooooo long

your heading source should look like this

This heading is way way tooooooo l­o­n­g

And ofcourse the element should have white-space: normal;

Answered almost 8 years ago by Amjad Mohamed
  • The heading text is being generated dynamically (changes a lot), so I won't be able to break it all manually. I just want it to break naturally, not in the middle of a word, but it just seems to extend outside itself (and its containing div for that matter). The white-space property didn't help. Thanks for the suggestions! Tiffany S almost 8 years ago
0
points

Are you talking about:

 h1,h2,h3 {display:inline;}
Answered over 7 years ago by elitesouth
  • No, not wrapping within other text, having a h1 tag that is multi-line, mine didn't seem to want to break lines (just one looong h1). Tiffany S over 7 years ago
0
points

Okay, I need to reopen this question. I have dynamically generated lists that are making up these header tags, but I can't get them to break! I set a width, display inline, white-space normal-- nothing will break these suckers! Are headers just break-proof or what? Is it just me? :P

Answered over 7 years ago by Tiffany S
  • Man, I am stumped, spans won't break for me either.... Tiffany S over 7 years ago
  • Okay... advantage with span is that it can be placed in a p tag that also has a width set and... viola, finally I get some wrapping! Jeez. lol Tiffany S over 7 years ago
  • Can you post a link or something? Marcel over 7 years ago
  • http://www.tiffszerp.com the tags that are having trouble wrapping are the small yellow lists in caps. Tiffany S over 7 years ago
  • Are these headings being made by sIFR? If they are not behaving like regular headings, maybe it is because they are flash content and not straight text. Abinadi Ayerdis over 7 years ago
  • I found someone on stackoverflow with the opposite problem: http://stackoverflow.com/questions/1594155/parts-of-word-gets-pushed-to-next-line-sifr3-r436 Abinadi Ayerdis over 7 years ago
0
points

What I found was that setting the max-width property works best for this.

Answered over 6 years ago by netclickMe