Hyphenate H1 text

Discussion in 'Web Design' started by upside, Jul 16, 2012.

to remove all ads.
  1. upside

    upside New Member

    Messages:
    30
    Is there any way to hyphenate H1 headers in CSS so that if the user makes their screen really narrow, the header doesn't just disappear?

    Many thanks, you guys are awesome!
     
  2. randled

    randled New Member

    Messages:
    23
    I've found that divs will force the text to adjust, so placing the h1 in a div of its own will make that happen. This is what I did quickly as a test:

    Code:
    <div id="headertest"><h1>test text lkhgdfjlghdfjkghdfjkghd</h1></div>
    Code:
    #headertest{
    	text-align:center;
    	margin:0 auto;
    	min-width:95%;
    	}
    Now when I resize the window the text moves to fit. Try that out.
     
  3. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    Nope hyphens are a "hard" character so rendering engines will not "break" the line of text.

    You will need to replace "hard" hyphens with a "soft" hyphen using the HTML entity of
    HTML:
     & shy ; 
    remove the spaces before using
     
  4. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    That is because there are SPACES in your text string which are "soft" characters and will allow the horizontal row to "break" and wrap to the next row.
     
  5. upside

    upside New Member

    Messages:
    30
    although there isn't initially a hyphen there, it's only when the screen width is narrowed right?

     
  6. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
  7. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    So the question is really "How to make a long line of text wrap when the container width is reduced"
     
  8. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
  9. upside

    upside New Member

    Messages:
    30
    More how do you make a long word split and be hyphenated when the container is reduced.

     
  10. d a v e

    d a v e New Member

    Messages:
    671
    reduce/limit the size of the heading when the width falls below a certain value?
     
  11. JakClark

    JakClark New Member

    Messages:
    128
    Word-wrap is obselete.

    Try adding hyphens: auto; in your class. It's post-CSS3, so limited support but anyone that will appreciate the effect will have a browser to support it anyway. ;)
     
    Last edited: Jul 19, 2012
  12. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    Actually THAT is incorrect.

    Certainly the word-wrap ATTRIBUTE, which was a MS developed, Internet Explorer only concept is "obsolete", though "deprecated" is the correct term in W3c concepts.

    However, had you read a little further on in my post, you would have noted that is a CSS property of word-wrap that I was advocating the TS could use.

    This property, not the attribute has been included in CSS level 3 and is supported by many current browsers.
     
  13. JakClark

    JakClark New Member

    Messages:
    128
    Oops, my bad!
     
  14. d a v e

    d a v e New Member

    Messages:
    671
    now you made Chris boldly go where no man has gone before, probably because no one could be bothered :)
     
  15. JakClark

    JakClark New Member

    Messages:
    128
    Lol, my bad! ;)
     
  16. upside

    upside New Member

    Messages:
    30
    That would work, yes. Or break the word by hyphenation.

     
  17. upside

    upside New Member

    Messages:
    30
    yep. that might work.

    g

     

Share This Page