Как предотвратить разрыв строки при дефисах во всех браузерах

У нас есть ckeditor на нашей CMS. Наши конечные пользователи будут вводить некоторые длинные статьи через этот редактор. Нам нужен способ предотвратить разрыв строки в дефисах на этих статьях.

есть ли в любом случае, чтобы предотвратить разрыв строки в дефисах на всех браузерах?

или у ckeditor есть возможность предотвратить это?

5 77
html css

5 ответов:

Я боюсь, что нет более простого способа сделать это надежно, чем разбить текст на " слова "(последовательности небелых символов, разделенных пробелами) и обернуть каждое" слово", содержащее дефис внутри nobr разметки. Так что входные данные, как bla bla foo-bar bla bla будет превращен в bla bla <nobr>foo-bar</nobr> bla bla.

вы можете даже рассмотреть возможность вставки nobr разметка всякий раз, когда "слово" содержит что-нибудь, кроме букв и цифр. Причина в том, что некоторые браузеры могут даже ломать строки, такие как" 2/3 " или " f (0)" (смотрите мою страницу на странности разрыва строки в браузерах).

41

можно использовать‑ который является неразрывным дефисом Unicode (U+2011).

HTML:&#x2011; или &#8209;

Также см.:http://en.wikipedia.org/wiki/Hyphen#In_computing

203

одним из решений может быть использование дополнительной span тег и white-space свойства CSS. Просто определите класс следующим образом:

.nowrap {
    white-space: nowrap;
}

а затем добавьте промежуток с этим классом вокруг вашего дефисного текста.

<p>This is the <span class="nowrap">anti-inflammable</span> model</p>

этот подход должен работать просто отлично во всех браузерах - багги реализации, перечисленные здесь, предназначены для других значений white-space свойство:http://reference.sitepoint.com/css/white-space#compatibilitysection

64

вы не можете сделать это без редактирования каждого экземпляра HTML. Следовательно, я написал некоторые JS, чтобы заменить их:

jQuery:

//replace hypens with no-breaking ones
$txt = $("#block-views-video-block h2");
$txt.text( $txt.text().replace(/-/g, '‑') );

Vanilla JS:

function nonBrHypens(id) {
    var str = document.getElementById(id).innerHTML; 
    var txt = str.replace(/-/g, '‑');
    document.getElementById(id).innerHTML = txt;
}
2

попробуй такое 

word-break: break-all; -webkit-hyphens:none;-moz-hyphens: none; hyphens: none;
-1