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

html css character-encoding line-breaks hyphenation

157324 просмотра

5 ответа

85529 Репутация автора

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

Пример:

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

Автор: Sparky Источник Размещён: 07.10.2011 06:46

Ответы (5)

555 плюса

27696 Репутация автора

Решение

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

Автор: CanSpice Размещён: 07.10.2011 06:48

245 плюса

2507 Репутация автора

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

<span style="white-space: nowrap;"></span>
Автор: Deb Размещён: 11.09.2012 03:23

21 плюса

29676 Репутация автора

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 Размещён: 06.12.2012 05:44

16 плюса

48652 Репутация автора

Вы также можете сделать это "способом соединения", вставив " 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 Размещён: 08.03.2016 03:11

4 плюса

357 Репутация автора

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

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

&#8288;—&#8288;

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

Автор: Eckstein Размещён: 19.03.2018 04:59
Вопросы из категории :
32x32