Как скрыть мягкий дефис (& shy;) в HTML / CSS

Question

Я пытаюсь обернуть слово в адрес электронной почты внутри div, где в противном случае он будет переполнен, потому что это слишком долго для ширины div.

Я знаю, что эта проблема была рассмотрена здесь ранее (например, этот вопрос), но читайте дальше, потому что я освещаю все возможные решения, упомянутые там и в других местах.

Ни одно из приведенных ниже решений не делает именно то, что я хочу:

1. CSS

   "word-wrap: break-word".
   

   В зависимости от ширины div, это нарушает адрес электронной почты в неудобных местах. например

   [e-mail].u

   К

2. Используйте мягкий дефис в HTML:

   ­
   

   Это действительно хорошо поддерживается, но отображает видимый дефис на странице, заставляя пользователя полагать, что в адресе электронной почты есть дефис:

   Информация @ долго-

   emailaddress.co.uk

3. Используйте пробел или пробел нулевой ширины в адресе электронной почты:

     (thinspace)
   ​ (zero-width space)
   

   Оба из них вставляют дополнительные символы (облом, если пользователь копирует-вставляет)

4. Переводы строк...

   <br />
   

   ... отсутствуют, потому что большую часть времени div достаточно велик, чтобы содержать адрес электронной почты в одной строке.

Я предполагаю, что надеюсь на какой-то оригинальный способ сделать это в HTML/CSS, возможно, используя псевдоэлементы (например:before /:after), или используя мягкий дефис, но каким-то умным способом скрывая это с помощью CSS.

Мой сайт использует jquery, поэтому я прибегну к этому, если потребуется, хотя я бы предпочел не включать целую библиотеку переносов только для этой маленькой проблемы!

Ответы на открытку, пожалуйста. (Или в идеале здесь...)

Answer 1

Вы можете обрезать текст и использовать всплывающую подсказку

   width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;

То, что я делаю, это при наведении курсора на отображение полного текста в виде всплывающей подсказки или использования title атрибут для всплывающей подсказки.

<p class="email" title="[e-mail]">...</p>

Answer 2

Может быть, вы можете попробовать <wbr> вместо <br>
К сожалению, это не будет работать в IE.

Answer 3

word-wrap:break-word основан на ширине контейнера, в который вы хотите разбить слово. Он не будет разбивать его там, где вы решите. К сожалению, вам не повезло, если вы не хотите уменьшить ширину div, чтобы он ломался, где вы хотите.

Как вы обнаружили, другие решения не соответствуют вашим потребностям. Кроме того, использование "библиотеки переносов jQuery", вероятно, не решит вашу проблему либо потому, что она будет просто вводить символы, разрывы строк и т. Д., Как вы и пытались. Вы в конечном итоге с той же проблемой.

Я не имею в виду никакого оскорбления, но, возможно, было бы хорошо переосмыслить дизайн, а не работать над дизайном? Ответ Робина - достойная альтернатива, хотя вы не сможете выбрать адрес электронной почты без JavaScript.

Answer 4

Вы можете изменить символ дефиса, используя свойство CSS hyphenate-character .

В этом случае просто установите пустую строку

      hyphenate-character: '';

И теперь вы можете использовать­мягкие перерывы.