Без дефиса нет разрыва строки

Я ищу, чтобы предотвратить разрыв строки после дефиса - на каждом конкретном случае, который совместим со всеми браузерами.

Пример:

У меня есть этот текст: 3-3/8" который в HTML: 3-3/8”

Проблема в том, что в конце строки из-за дефиса она разбивается и обертывается на следующую строку, а не обрабатывается как полное слово...

3-
3/8"

Я попытался вставить "нулевую ширину без символа разрыва",  без везения...

3-3/8”

Я вижу это в Safari и думаю, что он будет таким же во всех браузерах.

Ниже приведена моя doctype и кодировка символов...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Можно ли каким-либо образом предотвратить их разрыв строки после дефиса? Мне не нужно какое-либо решение, которое применяется ко всей странице... просто что-то, что я могу вставить по мере необходимости, например "нулевая ширина без символа разрыва", кроме того, что работает.

Вот демонстрация. Просто сделайте кадр более узким, пока линия не сломается на дефис.

http://jsfiddle.net/RagKH/

Ответ 1

Попробуйте использовать неразрывную дефис &#8209;. Я заменил тире на этот символ в вашем jsfiddle, уменьшил размер кадра настолько, насколько это возможно, и линия больше не разбивается.

Ответ 2

Вы также можете обернуть соответствующий текст с помощью

<span style="white-space: nowrap;"></span>

Ответ 3

IE8/9 визуализирует нерасширяющийся дефис, упомянутый в CanSpice, дольше, чем типичный дефис. Это длина en-dash вместо типичного дефиса. Эта разница в показаниях была для меня нарушением.

Поскольку я не мог использовать ответ CSS, указанный Дебой, я вместо этого предпочел использовать теги разрыва.

<nobr>e-mail</nobr>

Кроме того, я нашел конкретный сценарий, который заставлял IE8/9 разбивать дефис.

  • Строка содержит слова, разделенные неразрывными пробелами - &nbsp;
  • Ширина ограничена.
  • Содержит тире

IE делает это так.

Example of hyphen breaking in IE8/9

Следующий код воспроизводит проблему, изображенную выше. Мне пришлось использовать метатег для принудительного рендеринга для IE9, поскольку IE10 устранил проблему. Нет скрипта, потому что он не поддерживает метатеги.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <meta charset="utf-8"/>
        <style>
            body { padding: 20px; }
            div { width: 300px; border: 1px solid gray; }
        </style>
    </head>
    <body>
        <div>      
            <p>If&nbsp;there&nbsp;is&nbsp;a&nbsp;-&nbsp;and&nbsp;words&nbsp;are&nbsp;separated&nbsp;by&nbsp;the&nbsp;whitespace&nbsp;code&nbsp;&amp;nbsp;&nbsp;then&nbsp;IE&nbsp;will&nbsp;wrap&nbsp;on&nbsp;the&nbsp;dash.</p>
        </div>
    </body>
</html>

Ответ 4

Вы также можете сделать это "путь столяра", вставив " U+2060 Word Joiner".

Если Accept-Charset разрешает, сам символ Юникода может быть напрямую помещен в вывод HTML.

В противном случае это может быть сделано с использованием сущности. Например. чтобы присоединиться к тексту red-brown, используйте:

red-&#x2060;brown

или (десятичный эквивалент):

red-&#8288;brown

. Another usable character is " U+FEFF Zero Width No-break Space"[⁠&hairsp;⁠1&hairsp;]:

red-&#xfeff;brown

и (десятичный эквивалент):

red-&#65279;brown

[1]. Обратите внимание: хотя этот метод по-прежнему работает в крупных браузерах, таких как Chrome, он устарел после Unicode 3.2.


Сравнение "столярного пути" с " U+2011 Неразрывный Hyphen ":

  • Слово joiner может использоваться для всех других символов, а не только для дефиса.

  • При использовании словаря joiner, большинство рендереров растеризуют текст идентично. В Chrome, FireFox, IE и Opera, рендеринг нормальных дефис, например:

    а-б-с-д-е-е-г-ч-I-J-к-л-м-н-о-р-д-р-с-т-у-у-ш-х-у-г

    идентичен рендерингу нормальных дефис (с U + 2060 Word Joiner), например:

    a-⁠b-⁠c-⁠d-⁠e-⁠f-⁠g-⁠h-⁠i-⁠j-⁠k-⁠l-⁠m-⁠n-⁠o-⁠p-⁠q-⁠r-⁠s-⁠t-⁠u-⁠v-⁠w-⁠x-⁠y-⁠z

    в то время как вышеупомянутые два визуализатора отличаются от рендеринга "Неразрывный Hyphen", например:

    a‑b‑c‑d‑e‑f‑g‑h‑i‑j‑k‑l‑m‑n‑o‑p‑q‑r‑s‑t‑u‑v‑w‑x‑y‑z

    . (Степень разницы зависит от браузера и зависит от шрифта. Например, при использовании объявления шрифта "arial" Firefox и IE11 показывают относительно большие различия, в то время как Chrome и Opera показывают меньшие вариации.)

Сравнение "пути столяра" с <span class=c1></span> (CSS .c1 {white-space:nowrap;}) и <nobr></nobr>:

  • Слово joiner может использоваться для ситуаций, когда использование тегов HTML ограничено, например. формы веб-сайтов и форумов.

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


& Бык; Как протестировано на Windows 8.1 Core 64-bit, используя:
    & бык; IE 11.0.9600.18205
    & бык; Firefox 43.0.4
    & бык; Chrome 48.0.2564.109 (Official Build) m (32-разрядная версия)
    & бык; Опера 35.0.2066.92