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

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

Пример:

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

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

3-
3/8"

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

3-&#65279;3/8&rdquo;

Я вижу это в 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

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

Ответ 2

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

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

Ответ 3

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

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

<nobr>e-mail</nobr>

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

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

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

Следующий код воспроизводит проблему, изображенную выше. Мне пришлось использовать метатег для принудительного рендеринга для 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}