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

340

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

Пример:

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

Спарки
источник
@EricLeschinski, это уже было опубликовано в качестве ответа: stackoverflow.com/a/12362315/594235
Sparky
С charset = utf-8 вы можете вставить - неразрывный дефис
QuentinUK
@QuentinUK, верно ... разве это уже не принятый ответ? &#8209;неразрывный дефис.
Sparky
& # 8209; это обычный ASCII, поэтому utf-8 не нужен. С кодировкой страницы utf-8 можно вставлять фактические символы. - это не тот же персонаж, что и - хотя он выглядит одинаково.
QuentinUK
Правильный HTML для того, что вы написали, будет 3-3/8&Prime;или 3-3/8&#x2033;. Цитаты не являются простыми числами. Если вы хотите это в чистом ASCII, просто используйте прямые двойные кавычки ( &#x22;). Предпочтительно, если он будет представлен как хороший, разборчивый текст, вместо этого вы должны использовать 3<span style="font-variant: diagonal-fractions">3/8</style>&Prime;отображение «3⅜ ″»
Консервированный человек»,

Ответы:

579

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

CanSpice
источник
10
Я подумал, что это было что-то вроде неразрывного пробела, поэтому я просто искал «неразрывную черту» и оказался здесь . :-)
CanSpice
Аааа ... Я провел поиск "без перерыва" и ударил по стене этим &#65279;. Просто мне никогда не приходило в голову, что существует отдельный символ дефиса, который не сломается.
Sparky
6
В IE8 / 9 этот символ отображается дольше, чем обычный дефис. Похоже, тот же размер, что и в тире.
Мртшерман
21
Причина, по которой результат может отличаться от обычного дефиса, заключается в том, что многие шрифты не содержат неразрывный дефис. Это заставляет браузеры использовать другой шрифт, и в то время как неразрывный дефис выглядит так же , как обычный дефис в этом шрифте, нет никакой гарантии , что она соответствует нормальному дефис из другого шрифта.
Юкка К. Корпела
5
Я думаю, что ответ Деб является лучшим.
Рэй Чэн
257

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

<span style="white-space: nowrap;"></span>
дебютантка
источник
17
Да, это лучший ответ, чем принятый имхо. Спасибо @Deb.
CMH
38
@CMH это не поможет, если вы хотите обернуть пустые места (пустые места, где пользователь видит пустое пространство - ничего), но вы не хотите разбивать слова дефисами, например слово «электронная почта». Принятый ответ помогает в этом случае
xmojmr
12
В этом случае вы можете просто использовать span только вокруг «электронной почты».
Guirto
3
@CMH, это хороший ответ, который также работает, поэтому я проголосовал за него. Тем не менее, я решил не принимать этот ответ, потому что я попросил символ, который не будет автоматически переходить на следующую строку. То, что в некоторых браузерах «неразрывный дефис» ( &#8209;) может отображаться немного дольше, чем обычный дефис, было тривиально для меня.
Sparky
11
@Sparky Одна из проблем, связанных с использованием разных символов, заключается в том, что они портят результаты поиска. Попытка найти «3-3 / 8» на странице не найдет неразрывный дефис.
Мистер Листер
23

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

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

<nobr>e-mail</nobr>

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

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

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

Пример дефиса в 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>
mrtsherman
источник
6
Использование nobrявляется наиболее кросс-браузерным способом и работает независимо от шрифтов и CSS. nobrЭлемент не определен в HTML спецификации, но это следует рассматривать лишь как формальность. Но если вы должны писать по спецификациям HTML, то ответ Деба с использованием CSS - лучший вариант.
Юкка К. Корпела
5
Мне любопытно, почему вы не можете использовать решение CSS.
Райан Ахерн
2
@RyanAhearn - я использую сторонний инструмент, который не дает мне большого контроля над HTML. Он не поддерживает встроенные объявления тегов.
Мртшерман
Вместо «<nobr>» вы могли бы не просто использовать span с классом и управлять им с помощью CSS?
StephenESC
1
Обратите внимание, что nobrтег нестандартный и может сломаться в любое время. Документация MDN не рекомендует использовать этот тег: developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr
Филипп
16

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

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

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

red-&#x2060;brown

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

red-&#8288;brown

, Еще один полезный персонаж - « U+FEFFПространство без разрывов нулевой ширины » [⁠ ⁠1] :

red-&#xfeff;brown

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

red-&#65279;brown

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


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

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

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

    АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЫЭЮЯ

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

    а-⁠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

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

    а-б-с-д-е-е-г-ч-I-J-к-л-м-н-о-р-д-р-с-т-у-у-ш-х-у- 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

Pacerier
источник
Кажется, что «U + FEFF Zero Width без перерыва» не работает правильно в IE11.
Иван Гусев
Кажется, что «U + 2060» не работает, если после «-» следует какой-то символ Юникода: вот такbingo-&#8288;bongo
Иван Гусев
Несмотря на постоянное негативной прессы&#xfeff;
Джеймс Энтони Уилсон
6

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

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

&#8288;—&#8288;

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

Экштайн
источник
Мне удалось заставить это работать, используя ALT + 0173 (мягкий дефис) по некоторым причинам на Windows 10.
pspahn