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

340

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

Пример:

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

— Спарки
источник

@EricLeschinski, это уже было опубликовано в качестве ответа: stackoverflow.com/a/12362315/594235

— Sparky

С charset = utf-8 вы можете вставить - неразрывный дефис

— QuentinUK

@QuentinUK, верно ... разве это уже не принятый ответ? ‑неразрывный дефис.

— Sparky

& # 8209; это обычный ASCII, поэтому utf-8 не нужен. С кодировкой страницы utf-8 можно вставлять фактические символы. - это не тот же персонаж, что и - хотя он выглядит одинаково.

— QuentinUK

Правильный HTML для того, что вы написали, будет 3-3/8″или 3-3/8″. Цитаты не являются простыми числами. Если вы хотите это в чистом ASCII, просто используйте прямые двойные кавычки ( "). Предпочтительно, если он будет представлен как хороший, разборчивый текст, вместо этого вы должны использовать 33/8</style>″отображение «3⅜ ″»

— Консервированный человек»,

579

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

— CanSpice
источник

10

Я подумал, что это было что-то вроде неразрывного пробела, поэтому я просто искал «неразрывную черту» и оказался здесь . :-)

— CanSpice

Аааа ... Я провел поиск "без перерыва" и ударил по стене этим . Просто мне никогда не приходило в голову, что существует отдельный символ дефиса, который не сломается.

— Sparky

6

В IE8 / 9 этот символ отображается дольше, чем обычный дефис. Похоже, тот же размер, что и в тире.

— Мртшерман

21

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

— Юкка К. Корпела

5

Я думаю, что ответ Деб является лучшим.

— Рэй Чэн

257

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

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

— дебютантка
источник

17

Да, это лучший ответ, чем принятый имхо. Спасибо @Deb.

— CMH

38

@CMH это не поможет, если вы хотите обернуть пустые места (пустые места, где пользователь видит пустое пространство - ничего), но вы не хотите разбивать слова дефисами, например слово «электронная почта». Принятый ответ помогает в этом случае

— xmojmr

12

В этом случае вы можете просто использовать span только вокруг «электронной почты».

— Guirto

3

@CMH, это хороший ответ, который также работает, поэтому я проголосовал за него. Тем не менее, я решил не принимать этот ответ, потому что я попросил символ, который не будет автоматически переходить на следующую строку. То, что в некоторых браузерах «неразрывный дефис» ( ‑) может отображаться немного дольше, чем обычный дефис, было тривиально для меня.

— Sparky

11

@Sparky Одна из проблем, связанных с использованием разных символов, заключается в том, что они портят результаты поиска. Попытка найти «3-3 / 8» на странице не найдет неразрывный дефис.

— Мистер Листер

23

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

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

<nobr>e-mail</nobr>

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

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

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. Он не поддерживает встроенные объявления тегов.

— Мртшерман

Вместо «» вы могли бы не просто использовать 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 показывают меньшие изменения.)

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

Слово «присоединяющийся» может использоваться в ситуациях, когда использование 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-⁠bongo

— Иван Гусев

Несмотря на постоянное негативной прессы

— Джеймс Энтони Уилсон

6

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

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

&#8288;—&#8288;

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

— Экштайн
источник

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

— pspahn