在小框中包含较长的电子邮件地址 [英] Wrapping long email addresses in small boxes

问题描述

我有一个宽度为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 =[e-mail]> 
 big.ass.email@&＃8203; address-is&＃8203; .extremely.lame.de 
< / a> 
 ... 
  

这里，&＃8203; / code>插入在@之后和-is之后，在这些点处引起中断。

： word-wrap 和 word-break 在这里不会帮助你。

原因：

1. $ c>用于CJK（中文，日本，韩语）文本。 （参考）。它的主要目的是防止CJK文本的分词。休息是正常的。


2. word-wrap 用于指定浏览器是否可能在单词中断行以防止溢出。而已。 （参考）主要注意的事情是..通常不可破解的词可以在任意点被破坏。。

硬连字符有助于表示断点。你在你的电子邮件地址有一个连字符，并给出一个提示，打破字。

---

请注意：

一个更好的选择将是CSS3为我们做。 word-wrap 和 word-break 不允许控制断点。 连字符，但不幸的是连字符仍然是一种实验技术 p>

参考文献： https：// developer.mozilla.org/zh-TW/docs/Web/CSS/hyphens

连字符应该能够做到：

  hyphenate-limit-lines 
 hyphenate-limit -zone 
 hyphenate-character 
 hyphenate-limit-before 
  

目前不工作，因为它应该。否则，& shy; 会帮助你。

：

连字符会添加一个hard hyphen

：此处，此处和此处

I have a box with a width of 118px which contains an email address. I use word-wrap: break-word; to wrap the addresses better. But on a special kind of addresses this makes it worse.

big.ass.email@addre
ss-
is.extremely.lame.de

Because of word-wrap: break-word; it breaks after "addre" but ceause the rest of the address doesn't fit in one line it breaks again at a "prefered breakpoint" which happens to be the "-". In desired behaviour the second break in the email address would not be after "-" but after "extremely". I fear that's not possible with just CSS. Isn't it?

Here you can see a small example: http://jsfiddle.net/sbg8G/2/

解决方案

Your best bet here would be to use <WBR> tag or ​ character to introduce a soft-break wherever you wish. e.g.:

Demo: http://jsfiddle.net/abhitalks/sbg8G/15/

HTML:

...
<a href="[e-mail]">
    big.ass.email@&#8203;address-is&#8203;.extremely.lame.de
</a>
...

Here, ​ is inserted after the "@" and after "-is" to cause a break at those points.

Important: word-wrap and word-break won't help you here.

Reason:

1. word-break is meant for CJK (Chinese, Japanse, Korean) texts. (Reference). Its main purpose is to prevent word breaks for CJK text. Rest is normal.
2. word-wrap is used to specify whether or not the browser may break lines within words in order to prevent overflow. That's it. (Reference) The main thing to notice is that "..normally unbreakable words may be broken at arbitrary points.. ". Arbitrary points don't give you much control, do they?

Hard-hyphens help to indicate the break points. You have a hyphen in your email address and that gives a hint to break word there.

---

Note:

A better alternative would be have CSS3 do it for us. word-wrap and word-break doesn't allow control of break points. hyphens does, but, unfortunately hyphens still "is an experimental technology".

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

hyphens should be able to do the trick along with:

hyphenate-limit-lines
hyphenate-limit-zone
hyphenate-character
hyphenate-limit-before

But, this doesn't work currently as it should. Otherwise, a ­ would have helped you out.

Note 2:

hyphens, would add a "hard hyphen" (-) which would cause unintended results in your case (the email address would change).

Credits: here, here, and here

这篇关于在小框中包含较长的电子邮件地址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！