長いメールアドレスを小さな箱に包む
メールアドレスが入った幅118pxのボックスがあります。私が使う Word-wrap: break-Word;アドレスをより適切にラップします。しかし、特別な種類のアドレスでは、これはそれを悪化させます。
big.ass.email@addre
ss-
is.extremely.lame.de
のため Word-wrap: break-Word;「addre」の後で壊れますが、アドレスの残りの部分が1行に収まらないため、たまたま「-」である「優先ブレークポイント」で再び壊れます。望ましい動作では、電子メールアドレスの2番目の区切りは、「-」の後ではなく、「非常に」の後です。それはCSSだけでは不可能だと思います。そうですね。
ここに小さな例があります： http://jsfiddle.net/sbg8G/2/
ここでの最善の策は、<WBR>タグまたは​文字を使用して、必要な場所にソフトブレークを導入することです。例えば。：
デモ： http://jsfiddle.net/abhitalks/sbg8G/15/
HTML：
...
<a href="[email protected]">
big.ass.email@​address-is​.extremely.lame.de
</a>
...
ここで、​は、「@」と「-is」の後に挿入され、これらのポイントでブレークを引き起こします。
重要：Word-wrapおよびWord-breakはここでは役に立ちません。
理由：
Word-breakは、CJK（中国語、日本語、韓国語）のテキストを対象としています。 （参照） 。その主な目的は、CJKテキストの単語の区切りを防ぐことです。休息は正常です。Word-wrapは、オーバーフローを防ぐためにブラウザが単語内の行を分割できるかどうかを指定するために使用されます。それでおしまい。 （参照） 主な注意点は、 "..通常は壊れない単語が任意の場所で壊れている可能性があることです。" 。任意のポイントはあなたに多くのコントロールを与えませんね？
ハードハイフンは、ブレークポイントを示すのに役立ちます。メールアドレスにハイフンが含まれているため、Wordを壊すためのヒントが得られます。
注：
より良い代替案は、CSS3にそれを行わせることです。 Word-wrapおよびWord-breakは、ブレークポイントの制御を許可しません。 hyphensはそうですが、残念ながらhyphensはまだ「は実験的な技術です」です。
参照： https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
hyphensは、次の方法でトリックを実行できるはずです。
hyphenate-limit-lines
hyphenate-limit-zone
hyphenate-character
hyphenate-limit-before
しかし、これは現在のところ正常に機能していません。そうでなければ、­があなたを助けてくれるでしょう。
注2：
hyphensは、「ハードハイフン」（-）を追加します。これにより、ケースで意図しない結果が発生します（電子メールアドレスが変更されます）。
Text-overflow：Ellipsis;を使用してみてください。
overflow:hidden;
text-overflow:Ellipsis;