Отсутствие разрыва строки после дефиса

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

пример:

у меня есть этот текст: 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/

5 291
html css line-breaks character-encoding hyphenation

5 ответов:

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

510

вы также можете обернуть текст в

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

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

поскольку я не мог использовать ответ CSS, указанный Deb, я вместо этого решил не использовать теги break.

<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>
20

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

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

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

red-&#x2060;brown

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

red-&#8288;brown

. Другой полезный символ-это "U+FEFF нулевая ширина без перерыва"[&hairsp;1&hairsp;]:

red-&#xfeff;brown

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

red-&#65279;brown

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

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

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

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

    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

    идентичен рендерингу обычных дефисов (с 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

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

    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>:

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

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

• Как проверено на Windows 8.1 Core 64-бит с помощью:
* IE 11.0.9600.18205
* Firefox 43.0.4
• Chrome 48.0.2564.109 (официальная сборка) m (32-битный)
• Opera 35.0.2066.92

13

поздно на вечеринку, но я думаю, что это на самом деле самый элегантный. Используйте слово столяр символ Юникода ⁠; С обеих сторон тире, или длинное тире, или любой символ.

Так, вот так:

&#8288;—&#8288;

это соединит символ на обоих концах с его соседями (без добавления пробела) и предотвратит разрыв линии.

2