<div id="headertest"><h1>test text lkhgdfjlghdfjkghdfjkghd</h1></div>
#headertest{
text-align:center;
margin:0 auto;
min-width:95%;
}
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!
& shy ;
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.
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 ofremove the spaces before usingHTML:& shy ;
although there isn't initially a hyphen there, it's only when the screen width is narrowed right?
So the question is really "How to make a long line of text wrap when the container width is reduced"
There is the CSS3 property word-break which is not well supported.
word-wrap: break-word which browsers do support.
http://www.css3.info/preview/word-wrap/
Word-wrap is obselete.
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.
reduce/limit the size of the heading when the width falls below a certain value?
reduce/limit the size of the heading when the width falls below a certain value?