Завершение длинных адресов электронной почты в небольших ящиках

У меня есть ящик шириной 118 пикселей, который содержит адрес электронной почты. Я использую word-wrap: break-word;, чтобы обернуть адреса лучше. Но по особым адресам это делает его еще хуже.

[email protected]
ss-
is.extremely.lame.de

Из-за word-wrap: break-word; он прерывается после "addre", но, если остальная часть адреса не вписывается в одну строку, он снова разбивается на "предпочтительную точку останова", которая оказывается "-". При желаемом поведении второй перерыв в адресе электронной почты не будет после "-", но после "чрезвычайно". Я боюсь, что это невозможно с помощью только CSS. Не правда ли?

Здесь вы можете увидеть небольшой пример: http://jsfiddle.net/sbg8G/2/

ОТВЕТЫ

Ответ 1

Лучше всего здесь использовать тег <WBR> или &#8203;, чтобы ввести мягкий перерыв, где бы вы ни пожелали. например:.

Демо: http://jsfiddle.net/abhitalks/sbg8G/15/

HTML:

...
<a href="[email protected]">
    [email protected]&#8203;address-is&#8203;.extremely.lame.de
</a>
...

Здесь &#8203; вставляется после "@" и после "-is", чтобы вызвать разрыв в этих точках.

Важно: word-wrap и word-break здесь не помогут.

Причина:

  • word-break предназначен для текстов CJK (китайский, японский, корейский). (Ссылка). Его основная цель - предотвратить разрывы слов для текста CJK. Отдых в норме.
  • word-wrap используется, чтобы указать, может ли браузер прерывать строки в словах, чтобы предотвратить переполнение. Это. (Ссылка) Главное заметить, что ".. нормальные нерушимые слова могут быть разбиты на произвольные точки..". Произвольные точки не дают вам большого контроля, не так ли?

Жесткие дефисы помогают указать точки останова. У вас есть дефис в вашем адресе электронной почты, и это дает нам подсказку, чтобы сломать там слово.

Примечание

Лучшей альтернативой будет то, что 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

Но это не работает в настоящее время, как должно. В противном случае a &shy; помог бы вам.

Примечание 2:

hyphens, добавит "жесткий дефис" (-), который приведет к непредвиденным результатам в вашем случае (адрес электронной почты изменился).

Кредиты: здесь, здесь, и здесь

Ответ 2

Вы можете попробовать использовать text-overflow: ellipsis;

overflow:hidden;
text-overflow:ellipsis;

http://jsfiddle.net/sbg8G/8/