Відсутня перерва лінії після дефісу

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, так ... чи не це вже прийнята відповідь? ‑є дефісом, що не розривається.

— Спаркі

& # 8209; є звичайним ASCII, тому utf-8 не потрібен. За допомогою кодування utf-8 сторінки можна вставити фактичні символи. - не такий же персонаж, як - хоча це виглядає так само.

— QuentinUK

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

— Canned Man

579

Спробуйте використовувати дефіс, що не порушує ‑. Я замінив тире цим символом у вашій jsfiddle, зменшив кадр настільки маленьким, наскільки це може піти, і лінія там вже не розбивається.

— CanSpice
джерело

10

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

— CanSpice

А-а-а ... Я здійснив пошук "без розриву персонажа" і вдарив по стіні . Мені просто ніколи не спадало на думку, що є окремий символ дефісу, який не зламається.

— Спаркі

6

У IE8 / 9 цей символ відображається довше, ніж типовий дефіс. Схоже, він такого ж розміру, що й тире.

— mrtsherman

21

Причина, чому результат може відрізнятися від звичайного дефісу, полягає в тому, що багато шрифтів не містять дефісу, що не порушує. Це змушує браузери використовувати інший шрифт, і, хоча дефіс без перерв виглядає так само, як звичайний дефіс , шрифті, немає гарантії, що він відповідає нормальному дефісу з іншого шрифту.

— Jukka K. Korpela

5

Я думаю, що відповідь Деба найкраща.

— Рей Ченг

257

Ви також можете обгорнути відповідний текст

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

— Деб
джерело

17

Так, це краща відповідь, ніж прийнятий імхо. Дякую @Deb.

— CMH

38

@CMH це не допомагає, якщо ви хочете обгортати пробіли (порожні місця, де користувач бачить пробіл - нічого), але ви не хочете розділяти слова дефісами, наприклад, слово "електронна пошта". Прийнята відповідь допомагає в цьому випадку

— xmojmr

12

У такому випадку ви можете просто використовувати "довгу електронну пошту".

— guirto

3

@CMH, це хороша відповідь, яка також працює, тому я її проголосував. Однак я вирішив не приймати цю відповідь, тому що попросив символу, який не перейшов автоматично до наступного рядка. Факт, що "нерозривний дефіс" ( ‑) може відображатись трохи довше, ніж звичайний дефіс у певних браузерах, був для мене тривіальним.

— Sparky

11

@Sparky Однією із проблем використання різних символів є те, що вона псує результати пошуку. Намагаючись знайти "3-3 / 8" на сторінці, ви не знайдете нерозривного дефісу.

— Містер Лістер

23

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

Оскільки я не міг використати відповідь CSS, визначену Deb, я замість цього вибрав теги без розриву.

<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 - найкращий варіант.

— Jukka K. Korpela

5

Мені цікаво, чому ви не змогли використовувати рішення CSS.

— Ryan Ahearn

2

@RyanAhearn - я використовую сторонній інструмент, який не дає мені великого контролю над html. Він не підтримує вбудовані декларації тегів.

— mrtsherman

Замість '' ви могли не просто використати проміжок з класом і керувати ним за допомогою 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Дефісом без розбиття ":

Слово столяр може використовуватися для всіх інших символів, а не лише дефісів.
Під час використання словника, більшість рендерів буде растерізувати текст однаково . На Chrome, FireFox, IE та Opera, надання звичайних дефісів, наприклад:

а Б В Г Г Д Е Є Ж З И І Ї Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ ью я

є ідентичним візуалізації звичайних дефісів (з U + 2060 Word Joiner), наприклад:

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

в той час як два вищезазначені візуалізації відрізняються від візуалізації " Дефісу без розриву ", наприклад:

a ‑ b ‑ c ‑ d ‑ e ‑ f ‑ g ‑ h ‑ i ‑ j ‑ k ‑ l ‑ m ‑ n ‑ o ‑ p ‑ q ‑ r ‑ s ‑ t ‑ u ‑ v ‑ v ‑ w ‑ x ‑ y ‑ z

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

Порівняння "столярного шляху" з (CSS .c1 {white-space:nowrap;}) та :

Слово приєднувач може використовуватися в ситуаціях, коли використання HTML-тегів обмежене, наприклад, форми веб-сайтів та форумів.
За спектром викладу та змісту більшість вважатиме слово "столяр" ближчим до змісту порівняно з тегами.

^{• Як перевірено на 64-розрядному Windows 8.1 Core, використовуючи:

    • IE 11.0.9600.18205

    • Firefox 43.0.4

    • Chrome 48.0.2564.109 (Official Build) m (32-бітний)

    • Opera 35.0.2066.92}

— Pacerier
джерело

Здається, що "U + FEFF Zero Width No-Break Space" не працює належним чином в IE11.

— Іван Гусєв

Здається, "U + 2060" не працює, якщо "-" супроводжується деяким символом унікоду: як-отbingo-⁠bongo

— Іван Гусєв

Незважаючи на постійну негативну пресу

— JamesWilson

6

Пізно на вечірку, але я думаю, що це насправді найелегантніше. Використовуйте символ WIN JOINER Unicode & # 8288 ; по обидві сторони від дефісу, або тире, або будь-якого персонажа.

Отже, як:

&#8288;—&#8288;

Це приєднає символ на обох кінцях до своїх сусідів (не додаючи пробілу) та запобігає розриву рядків.

— Екштайн
джерело

Мені вдалося змусити це працювати за допомогою ALT + 0173 (м'який дефіс) чомусь у Windows 10.

— pspahn