我有一个宽度为118px的框,其中包含一个电子邮件地址.我使用word-wrap:break-word;更好地包装地址.但是在一种特殊的地址上,这使得它变得更糟.
big.ass.email@addre ss- is.extremely.lame.de
由于word-wrap:break-word;它在“addre”之后突破,但是停止地址的其余部分不适合一行,它在“优先断点”再次破裂,恰好是“ – ”.在期望的行为中,电子邮件地址中的第二个中断不会在“ – ”之后而是在“极端”之后.我担心这只是CSS不可能.不是吗
这里可以看到一个小例子:http://jsfiddle.net/sbg8G/2/
解决方法
你最好的选择是使用< WBR>标签或#8203;角色介绍一个软休息,无论你想要什么.例如.:
演示:http://jsfiddle.net/abhitalks/sbg8G/15/
HTML:
... <a href="big.ass.email@address-is.extremely.lame.de"> big.ass.email@​address-is​.extremely.lame.de </a> ...
这里,在“@”之后和“-is”之后插入这些点.
重要提示:单词和单词不会帮助您.
原因:
>中文(简体)是为CJK(中文,日文,韩文)文本而设. (Reference).其主要目的是防止CJK文字发音.休息正常
> word-wrap用于指定浏览器是否可以在单词中断行,以防止溢出.而已. (Reference)要注意的主要事情是“正常不可破碎的话可能会在任意点被打破”.任意点不给你太多的控制,他们呢?
硬连字符有助于表明断点.你的电子邮件地址中有一个连字符,并提示在那里打破字眼.
注意:
CSS3会为我们做一个更好的选择.单词换行和断字不允许控制断点.连字符,但不幸的是连字符仍然是“实验技术”.
参考:https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
连字符应该能够做到这一点:
hyphenate-limit-lines hyphenate-limit-zone hyphenate-character hyphenate-limit-before
但是,这并不适用.否则,一个会帮你出去
笔记2: