Hyphenate H1 text

upside

New Member
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!
 

randled

New Member
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.
 

chrishirst

Well-Known Member
Staff member
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!

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
 

chrishirst

Well-Known Member
Staff member
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.

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.
 

upside

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

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
 

chrishirst

Well-Known Member
Staff member
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.
 

JakClark

New Member
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.

Oops, my bad!
 
Top