Prevent word breaks

[jknetdesign]

http://stagedecommerce.webeclectic.com/

I’ve tried different white-space and word-break properties. How can I get the text on these paragraphs to avoid hyphened word breaks and have the text center justified. Center justified meaning not only text aligned center but actually justified.

[__]

How can I get the text on these paragraphs to avoid hyphened word breaks …?

&​#8209; (copy+paste: ‑) is the non-breaking-hyphen entity. AFAIK browser support is solid, though it may vary in appearance depending on the font used (most fonts don’t include this character, so you may see system substitutions).

You can also use CSS:

<span style="white-space: nowrap">no-breaks-here</span>

Center justified meaning not only text aligned center but actually justified.

Could you explain further…? “Centered” and “justified” are mutually exclusive concepts.

[__]

http://jknetdesign.com/images/bluopal-forum.png

Both columns (except the list) in that shot are justified, not centered.

The last line aligning left is normal behavior; there are semi-hacks to justify the last line. FireFox and IE also support the text-align-last property (webkit may jump onboard eventually, I think it’s an up-and-coming spec) if you want the last line right-justified or centered.

This a WordPress theme so I am depending on CSS. I tried nowrap and the text spread across the entire page…

You would have to change the markup. Either by replacing the character itself, or by wrapping the text-in-question in a span before applying nowrap.

[__]

I added a span class called nobreak and wrapped the paragraphs and it’s all across the screen.

You misunderstand: don’t wrap the paragraphs (unless you want them all across the screen). Wrap the words that you don’t want to break.

<p>This is my paragraph.  It will wrap normally, except for the part about <span style="white-space:nowrap">happily-hyphenated-hillbillies</span>.

Having justified text is going to be a nightmare on a responsive site — or with narrow columns.

Yeah. At the very least, make sure any justified text is in a container with a minimum width.

[__]

Why would I wrap each compromised word when I can just add a br tag?

I’m not sure I understand. You would wrap the individual words so the nowrap property applies only to them, rather than to the entire text (which, I gather, is not what you want).

How would adding a <br> tag help prevent line breaks?

make sure any justified text is in a container with a minimum width

That’s what I was looking for! I knew there was another property needed to assist the nowrap.

That suggestion was meant to for the “ugly-justified-text-in-narrow-columns” issue. It doesn’t affect text wrapping at all.

[marcchehab]

It’s quite a while since this was asked, but, anyway, maybe somebody finds it. What jknetdesign was looking for, I think, is:

-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;

Good day.

[jknetdesign]

I didn’t about the hyphens rule.

Thanks

[Paulie_D]

Not completely supported in Blink/Webkit though AFAIK(although none is in Chrome)

http://caniuse.com/#feat=css-hyphens

https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

[panyjalea]

I found it! Thanks, did the trick.

[Author]

Posts