[WSG] Forward-slash suppresses word wrap in Windows IE
I've just blown some time trying to debug my CSS as rendered by IE6,
finally discovering that the problem had nothing to do with CSS.
In Windows IE, a forward-slash (virgule) that follows whitespace
suppresses word wrap:
http://juniperwebcraft.com/demo/slashwrap.html
It's only these Windows IE-class browsers that share this peculiarity:
- IE 5.0
- IE 5.5
- IE 6.0
- IE 7.0
- AOL 9.0
http://www.browsercam.com/public.aspx?proj_id=237505
Solutions: I haven't found a way to negate the effect. The CSS rule
{white-space: normal} does not override it, nor does using the HTML
entity #47;
Workarounds: Preceding the slash with a BR tag works, of course, but
I haven't yet found anything else.
Your suggestions are welcome.
I'm croggled that I've never stumbled on this before. I haven't
found any reference to it on the net.
Is it a bug or could Microsoft possibly consider it a feature?
This may be a trivial point, but it hung me up for a while because I
couldn't believe it wasn't my CSS that was causing a text box to
exceed its styled width in IE. The client's text I was marking up
separated two words with a space and a forward-slash. Fortunately
this character sequence is highly unusual.
Grumpily,
Paul
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Forward-slash suppresses word wrap in Windows IE
Paul Novitski wrote:
Workarounds: Preceding the slash with a BR tag works, of course, but
I haven't yet found anything else.
Your suggestions are welcome.
Hi Paul,
Try this:
P.demo2 {word-break:break-all}
Regards,
Thierry | www.TJKDesign.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Forward-slash suppresses word wrap in Windows IE
At 08:49 AM 3/20/2006, Thierry Koblentz wrote:
Paul Novitski wrote:
Workarounds: Preceding the slash with a BR tag works, of course, but
I haven't yet found anything else.
Try this:
P.demo2 {word-break:break-all}
Thanks, Thierry, but no go:
word-break is shorthand for word-break-CJK || word-break-inside
[1]. word-break-CJK is used with Chinese, Japanese, and Korean type
orthographies. It breaks between characters strictly at the block
width without regard for Latin-style word breaks.
Regards,
Paul
[1] http://www.w3.org/TR/2002/WD-css3-text-20021024/#line-breaking
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Forward-slash suppresses word wrap in Windows IE
Paul Novitski wrote:
Workarounds: Preceding the slash with a BR tag works, of course, but
I haven't yet found anything else.
Try this:
P.demo2 {word-break:break-all}
Thanks, Thierry, but no go:
word-break is shorthand for word-break-CJK || word-break-inside
[1]. word-break-CJK is used with Chinese, Japanese, and Korean type
orthographies. It breaks between characters strictly at the block
width without regard for Latin-style word breaks.
I missed part of the question, I tought you just wanted to break the string,
no matter where...
Another solution would be to use IMG elements in there. It's an ugly
workaround, but unlike the BRs they would create line break only when and
where needed.
Regards,
Thierry | www.TJKDesign.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Forward-slash suppresses word wrap in Windows IE
At 12:01 PM 3/20/2006, Thierry Koblentz wrote: Paul Novitski wrote: Workarounds: Preceding the slash with a BR tag works, of course, but I haven't yet found anything else. Another solution would be to use IMG elements in there. It's an ugly workaround, but unlike the BRs they would create line break only when and where needed. Thanks, Thierry. Sadly, yours may be the best solution. I've added it to my demo page: http://juniperwebcraft.com/demo/slashwrap.html and run it through Browsercam: http://www.browsercam.com/public.aspx?proj_id=237505 The problem begins to show up on the third page (pictures 25-36). Your solution fixes the problem in those instances and doesn't break in any instance. I have to say, though, that inserting images into the HTML purely in order to tweak the presentation makes me twitch. Tremble as you watch the finger bones of spacer gifs claw their way out of the grave! Paul ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Forward-slash suppresses word wrap in Windows IE
Thierry Koblentz wrote:
Paul Novitski wrote:
Workarounds: Preceding the slash with a BR tag works, of course, but
I haven't yet found anything else.
Try this:
P.demo2 {word-break:break-all}
Thanks, Thierry, but no go:
... It breaks between characters strictly at the block
width without regard for Latin-style word breaks.
I missed part of the question, I tought you just wanted to break the string,
no matter where...
Another solution would be to use IMG elements in there.
Better yet, use the character U+200B ZERO WIDTH SPACE (though, you'd
need to check browser support)
--
Lachlan Hunt
http://lachy.id.au/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Forward-slash suppresses word wrap in Windows IE
Better yet, use the character U+200B ZERO WIDTH SPACE (though, you'd
need to check browser support)
Something along those lines...
HTML:
i class=wbrv#8203;/i
CSS:
* html .wbrv {font-family: Arial Unicode MS; visibility: hidden;}
...is what I use when everything else fails.
Georg
--
http://www.gunlaug.no
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Forward-slash suppresses word wrap in Windows IE
Lachlan Hunt wrote: Thierry Koblentz wrote: I missed part of the question, I tought you just wanted to break the string, no matter where... Another solution would be to use IMG elements in there. Better yet, use the character U+200B ZERO WIDTH SPACE (though, you'd need to check browser support) I tried #8203; it does break the line but unfortunately it also creates a square character in IE (not visible in modern browsers). Regards, Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Forward-slash suppresses word wrap in Windows IE
Gunlaug Sørtun wrote:
Better yet, use the character U+200B ZERO WIDTH SPACE (though, you'd
need to check browser support)
Something along those lines...
HTML:
i class=wbrv#8203;/i
CSS:
* html .wbrv {font-family: Arial Unicode MS; visibility: hidden;}
...is what I use when everything else fails.
That takes care of the square character, but it also creates an empty space
at the beginning of the line.
What about:
HTML:
i/i
CSS:
* html i {width:0;overflow:hidden}
Shorter and seems to work fine...
Regards,
Thierry | www.TJKDesign.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Forward-slash suppresses word wrap in Windows IE
Paul Novitski wrote: I have to say, though, that inserting images into the HTML purely in order to tweak the presentation makes me twitch. Tremble as you watch the finger bones of spacer gifs claw their way out of the grave! I agree ;) IMHO, the best would be to use an *empty* SPAN with the CSS rule I mentionned in my previous post. Georg's I idea is great in term of minimal markup though. Regards, Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Forward-slash suppresses word wrap in Windows IE
Paul Novitski wrote: In Windows IE, a forward-slash (virgule) that follows whitespace suppresses word wrap: http://juniperwebcraft.com/demo/slashwrap.html Probably a foolish suggestion - have you tried replacing the slash with a character entity? #047; or sol; seems to cover it. Something to try? warmly, Lea -- Lea de Groot Brisbane, Australia ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
