html – 将较长的电子邮件地址包装在小盒子中

前端之家收集整理的这篇文章主要介绍了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@&#8203;address-is&#8203;.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:

连字符会添加一个“硬连字符”( – ),这会导致您的情况出现意想不到的结果(电子邮件地址会发生变化).

学分:here,herehere

猜你在找的HTML相关文章