Gojomo

2005-03-26
Cross-browser invisible word-break in HTML/CSS

Problem: you want to provide a 'hint' that a long string can break (word-wrap) in a certain place, but don't want anything -- no hyphen, space, whatever -- to appear there if the break isn't necessary. This is often important when you want to prevent certain text content from forcing layout elements from overgrowing in the horizontal direction.

Peter-Paul Koch's Quirksmode has a rundown of the options and their limitations:

  • The entity ­ -- a 'shy hyphen' -- works nicely in IE. (It even displays a hyphen only when the break is taken.) However, it doesn't work in Mozilla, and is buggy on IE/Mac and Safari.
  • The entity &8203; -- zero-width space -- works properly in Mozilla, Safari, and Opera. But it leaves a block glyph in IE everywhere used, not just at taken breaks.
  • The HTML element <WBR> works in Mozilla and IE, but doesn't cause a break in Safari and Opera.
Koch suggests <WBR> -- at least it works or doesn't work cleanly -- and uses it in Quirksmode's tables.

I think I've got a solution that extends <WBR>'s usefulness to Opera, and maybe Safari. (I don't have a Mac to test.) The trick is to use the CSS 'content' property to insert the character that does work in Opera/Safari after all <WBR> elements. That is:

wbr:after { content: "\00200B" }
("\00200B" is the CSS escape for &8203;.)

Works for me in Opera 8b3 -- which otherwise did not respect <WBR>. Seems to be harmless in IE, perhaps because of problems with the :after pseudo-element. (If it did start rendering the block glyph in IE, some other tactic could be used to hide the style sheet from IE.)

UPDATE (2005-03-27 16:34): Doesn't work in Safari 1.2.4. Shucks.

Technorati Tags: , , ,


Comments:
Doesn't seem to work in the latest webkit nightlies either, though I didn't test it too heavily.
 
This comment has been removed by the author.
 
In opera 9.23, with the special style to "activate" <wbr>, a glyph appears like when using &#8203; in IE6.

I've found a solution:

wbr {
  width: 0px;
  display: inline-block;
  overflow: hidden;
}

Screenshots:
http://tests.bd.dyndns.org/opera-wbr.html
 
I've come up with a better solution.
Get rid of wbr:after, and only use this style:

wbr { display: inline-block; }
 
It would be nice if ­ version not only displays hyphen at the right side, but also at the left side of new line! (continuation).

I have no idea about this ­ and wbr. Bad that this adds considerable overhead to texts. :( Is there any plans to have automatic hyphenation like in LaTeX in any browser?
 
if you want get hd amateur porn videos, then click Sperm Receptacles 4 this video link.
 
Nice post .Keep updating UI online training Bangalore

 
me like your posts. post or given problem to many users. to you want to split the videos or the following videos:
See more
> movies2k
> arrival putlockers
> the revenant putlocker
 
Panditji is top astrologer in gurgaon city
 
Brainy Provide education franchise opportunity in India and online education business opportunities along with how to start online education franchise business and investment information and complete course structure for 7-12 years kids.

business opportunities in education sector in india
 
This comment has been removed by the author.
 
This comment has been removed by the author.
 
Nice article. if you want to watch porn visit: Ponty Tube
 
This comment has been removed by the author.
 
Thanks for sharing informative post. Soulblu is a leading vape store Melbourne offering wide range of e liquids, e electronic cigarette, vape supplies, DIY mixing tools, etc.
 
best weighing machine in india 
 
Download and install Vidmate App which is the best HD video downloader software available for Android. Get free latest HD movies, songs, and your favorite TV shows.
 
Download and install Vidmate App which is the best HD video downloader software available for Android. Get free latest HD movies, songs, and your favorite TV shows.

 
Download latest audio and video file fromvidmate
 
I like this blog very much, Its a very nice billet to read and incur Info. Also, check our sites..!!

123.hp.com , 123.hp.com/setup , 123 hp com , 123 hp com setup, 123 hp setup , HP com setup
 
Nice Presentation and its hopefull words..
if you want a cheap web hosting in web
cheap web hosting company chennai

 
thanks for ur valuable information,keep going touch with us

Scaffolding dealers in chennai

 
stripe quickbooks integration
 
thanks for your extrodinary services , go ahead
Scaffolding dealers in chennai

 
professional bridal makeup artist in chennai Style Specializes in beauty bridal makeup and makes assured that individual bride should look like a princess.

best bridal makeup artist in chennai

 


Soma pill is very effective as a painkiller that helps us to get effective relief from pain. This cannot cure pain. Yet when it is taken with proper rest, it can offer you effective relief from pain.
This painkiller can offer you relief from any kind of pain. But Soma 350 mg is best in treating acute pain. Acute pain is a type of short-term pain which is sharp in nature. Buy Soma 350 mg online to get relief from your acute pain.

https://globalonlinepills.com/product/soma-350-mg/


Buy Soma 350 mg
Soma Pill
Buy Soma 350 mg online



Buy Soma 350 mg online
Soma Pill
Buy Soma 350 mg
 

Thanks you sharing information.
You can also visit on

How to think positive

Cure For Cowardice

Mudras

SOCIAL ANXIETY AND LOW SELF-ESTEEM

PUBLIC MEETING AND PRESENTATION
 
Wow, Great information and this is very useful for us.

professional bridal makeup artist in chennai
best bridal makeup artist in chennai
 

The article is so informative. This is more helpful for our
selenium training in chennai
selenium online courses best selenium online training
selenium testing training
selenium classes
Thanks for sharing.

 
I like the helpful info you provide in your articles. I’ll bookmark your weblog and check again here regularly. I am quite sure I will learn much new stuff right here! Good luck for the next!
"web designing course in chennai | web designing classes in chennai "
"web designing training in chennai | web designing institute in chennai "
"web designing and development course | web designing training and placement "
 
if you want any promotion please visit us ,
Linkedin Marketing company chennai
Erp software development company in chennai
seo company in chennai

 
Grow sale india classified ads website Buy&sell find just about anything

post free classified ads in india

 
Fourceup Security is a best security service in chennai based upon Factories ,Offices ,Banks & their ATM ,Hotels ,Hospitals ,Schools ,Residential Apartments ,Construction Sites(Conditions Apply) ,Functions ,Tracking Crime systems.

best security service in chennai
security agency in chennai

 
If you need creative website designing services, just visit OGEN Infosystem for the best Website Designing Services in Delhi, India and also get SEO Services to get more traffic on your website.
SEO Service in Delhi
 
Post a Comment