html – 将较长的电子邮件地址包装在小盒子中
|
我有一个宽度为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文字发音.休息正常 硬连字符有助于表明断点.你的电子邮件地址中有一个连字符,并提示在那里打破字眼. 注意： CSS3会为我们做一个更好的选择.单词换行和断字不允许控制断点.连字符,但不幸的是连字符仍然是“实验技术”. 参考：https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens 连字符应该能够做到这一点： hyphenate-limit-lines hyphenate-limit-zone hyphenate-character hyphenate-limit-before 但是,这并不适用.否则,一个-会帮你出去 笔记2： 连字符会添加一个“硬连字符”( – ),这会导致您的情况出现意想不到的结果(电子邮件地址会发生变化). 学分：here,here和here （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |