Нет переноса строки после дефиса
157324 просмотра
5 ответа
Я пытаюсь предотвратить разрыв строки после дефиса -
в каждом конкретном случае, который совместим со всеми браузерами.
Пример:
У меня есть этот текст: 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" />
Есть ли способ, которым я могу предотвратить разрыв строки после дефиса? Мне не нужно никакого решения, которое применимо ко всей странице ... просто что-то, что я могу вставить по мере необходимости, например "символ нулевой ширины без разрыва", кроме того, которое работает.
Вот демо. Просто сделайте рамку уже, пока линия не обрывается на дефисе.
Автор: Sparky Источник Размещён: 12.11.2019 09:32Ответы (5)
555 плюса
Попробуйте использовать неразрывный дефис ‑
. Я заменил черту этим символом в вашем jsfiddle, сократил фрейм настолько, насколько это возможно, и линия там больше не разбивается.
245 плюса
Вы также можете обернуть соответствующий текст
<span style="white-space: nowrap;"></span>
Автор: Deb
Размещён: 11.09.2012 03:23
21 плюса
IE8 / 9 отображает неразрывный дефис, упомянутый в ответе CanSpice, дольше, чем типичный дефис. Это длина черты вместо типичного дефиса. Эта разница в показе была для меня выгодной сделкой.
Поскольку я не мог использовать ответ CSS, указанный Deb, я вместо этого решил не использовать теги break.
<nobr>e-mail</nobr>
Кроме того, я обнаружил конкретный сценарий, который привел к разрыву IE8 / 9 на дефисе.
- Строка содержит слова, разделенные неразрывными пробелами -
- Ширина ограничена
- Содержит тире
IE отображает это так.
Следующий код воспроизводит проблему, изображенную выше. Мне пришлось использовать метатег для принудительного рендеринга в 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 there is a - and words are separated by the whitespace code &nbsp; then IE will wrap on the dash.</p>
</div>
</body>
</html>
Автор: mrtsherman
Размещён: 06.12.2012 05:44
16 плюса
Вы также можете сделать это "способом соединения", вставив " U+2060
Word Joiner ".
Если Accept-Charset
позволяет, сам символ Unicode может быть вставлен непосредственно в вывод HTML.
В противном случае это может быть сделано с использованием кодирования объекта. Например, чтобы присоединиться к тексту red-brown
, используйте:
red-⁠brown
или (десятичный эквивалент):
red-⁠brown
, Еще один полезный персонаж - « U+FEFF
Пространство без разрывов нулевой ширины » [ 1] :
red-brown
и (десятичный эквивалент):
red-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
4 плюса
Поздно на вечеринку, но я думаю, что это на самом деле самый элегантный. Используйте символ Unicode WORD JOINER & # 8288 ; по обе стороны от вашего дефиса, или их тире, или любого другого персонажа.
Итак, вот так:
⁠—⁠
Это соединит символ на обоих концах с его соседями (без добавления пробела) и предотвратит разрыв строки.
Автор: Eckstein Размещён: 19.03.2018 04:59Вопросы из категории :
- html Определить часовой пояс пользователя
- html Как определить, какой из указанных шрифтов был использован на веб-странице?
- html Как мне дать моим веб-сайтам значок для iPhone?
- html Как отключить автозаполнение браузера в поле веб-формы / теге ввода?
- css Создание закругленных углов с помощью CSS
- css Как автоматически изменить размер текстовой области с помощью Prototype?
- css Как вы можете настроить номера в упорядоченном списке?
- character-encoding Как преобразовать строки в и из байтовых массивов UTF8 в Java
- character-encoding PHP output showing little black diamonds with a question mark
- character-encoding Соскрести цену с сайта
- character-encoding Проблема с кодировкой classic ASP
- line-breaks Как я могу сделать разрыв строки (продолжение строки) в Python?
- line-breaks Как разбить строку на более чем одну строку кода в JavaScript?
- line-breaks Новые строки Unix для новых строк Windows (в Windows)
- line-breaks Как преобразовать разрыв строки ^ M в «нормальный» перевод строки в файле, открытом в vim?
- hyphenation Алгоритм переноса OpenOffice - что означают параметры?
- hyphenation Нет переноса строки после дефиса
- hyphenation Текст переноса только при необходимости, чтобы предотвратить переполнение контейнера
- hyphenation AHF Formatter: предотвращение переноса строк для переносимых слов