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

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

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

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

  1. в CSS

    "word-wrap: break-word".

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

    info@longemailaddress.co.u

    k

  2. использовать Мягкий Перенос в HTML:

    ­

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

    info@long -

    атрибут emailaddress.ко.Великобритании

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

      (thinspace)
​ (zero-width space)

    оба эти вставки дополнительных символов (облом, если пользователь копировать пасты)

  4. Linebreaks...

    <br />

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

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

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

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

7
css html hyphenation soft-hyphen word-wrap

3 ответов

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

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

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

<p class="email" title="long-email-address@mail.com">...</p>
6

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

4

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

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

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

1