Нет переноса строки после дефиса - PullRequest
Новая
       43

Нет переноса строки после дефиса

310 голосов
/ 07 октября 2011

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

Пример:

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

544 голосов
/ 07 октября 2011

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

237 голосов
/ 11 сентября 2012

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

<span style="white-space: nowrap;"></span>
21 голосов
/ 06 декабря 2012

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

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

<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>
15 голосов
/ 08 марта 2016

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

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

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

red-&#x2060;brown

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

red-&#8288;brown

. Еще один полезный символ: "U+FEFF Пробел нулевой ширины без перерывов " [& # x2060; & hairsp; & # x2060; 1 & hairsp;] : 

red-&#xfeff;brown

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

red-&#65279;brown

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

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

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

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

    A-B-C-D-E-F-G-H-I-J-к-л-м-н-о-р-д-р-с-т-у-у-ш-х-у-г * одна тысяча шестьдесят восемь *

    идентично отображению обычных дефисов (с U + 2060 Word Joiner), например:

    а - & # x2060; б - & # x2060; с - & # x2060; д - & # x2060; е - & # x2060; е - & # x2060; г - & # x2060; ч - & # x2060 ; я - & # x2060; J - & # x2060; к - & # x2060; л - & # x2060; м - & # x2060; п - & # x2060; о - & # x2060; р - & # x2060; д - & # x2060; г - & # x2060; s - & # x2060; т - & # x2060; и - & # x2060; v - & # x2060; ж - & # x2060; х - & # x2060; у- & # x2060; г

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

    а & # x2011; б & # x2011; с & # x2011; d & # x2011; е & # x2011; е & # x2011; г & # x2011; ч & # x2011; я & # x2011; J & # x2011; к & # x2011; л & # x2011 ; м & # x2011; п & # x2011; о & # x2011; р & # x2011; д & # x2011; г & # x2011; s & # x2011; т & # x2011; у & # x2011; v & # x2011; ш & # x2011; х & # x2011; у & # x2011; г

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

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

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

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

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

3 голосов
/ 19 марта 2018

Поздно на вечеринку, но я думаю, что это на самом деле самый элегантный.Используйте символ Unicode WORD JOINER ⁠ ;по обе стороны от дефиса, или тире, или любого символа.

Итак, вот так: 

&#8288;—&#8288;

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

...