Спецификация английского слова CSS

Question

Есть ли какие-либо символы, которые не прерывают словосочетание CSS?

Например, предположим, что я придаю элементу большой размер word-spacing (равный ширине элемента), чтобы он разбивался на каждое слово. Таким образом, для этого:

<div class="break">THIS BREAKS ON EACH LINE</div> 

Я получаю:

--------- 
| THIS 
| BREAKS 
| ON 
| EACH 
| LINE 
|-------- 

Есть ли персонаж, я могу использовать, что не будет разрывать строки. Например:

<div class="break">THIS BREAKS & EACH LINE</div> 

Я не хочу перерыв после амперсанд:

--------- 
| THIS 
| BREAKS 
| & EACH   <<<--- Here 
| LINE 
|-------- 

Answer 1

В общем, white-space влияет на интервал между «словами» в техническом смысле: слово есть максимальная последовательность непробельных символов. Таким образом, это влияет на все пробелы (пробелы, табуляции, новые строки). Тем не менее, такие как fixed-width space characters  не учитываются как пробелы, так что вы можете написать

THIS BREAKS & EACH LINE 

, если вы не хотите, чтобы интервал между «&» и «ДРУГ» расширяться. Однако это не совсем безопасно, поскольку браузеры могут когда-нибудь обрабатывать персонажи по-разному. Они уже изменили способ обработки  ; он был «не растяжимым», но больше не был.

Так безопасный способ действительно

THIS BREAKS <span class=nows>& EACH</span> LINE 

с CSS

.nows { word-spacing: 0 } 

Предотвращение разрывов строк другой вопрос, часто спрашивают, и ответил на SO.Используя безопасный путь выше, вы могли бы просто использовать не-брейк пространство вместо нормального пространства:

THIS BREAKS <span class=nows>&&nbsp;EACH</span> LINE 

Answer 2

Вы можете использовать   (неразрывный пробел), чтобы предотвратить разрыв ... Но это будет maintain your word spacing.

Лучше бы бросить немного jQuery in there, а-ля:

CSS

.break{ 
    word-spacing:50px; 
    width:50px; 

} 

HTML

<div class="break">THIS BREAKS ON & EACH LINE</div> 

JQuery

var txt = $('.break'); 
var ls=txt.css('word-spacing'); 
txt.html(txt.text().replace(' & ', '<span style="margin:0 -'+ls+' 0 0;"> &&nbsp;</span>')); 

Answer 3

Использование не- ломка пространство   так:

<div class="break">THIS BREAKS &&nbsp;EACH LINE</div> 

see this demo

Answer 4

Я нашел достойного обходной, используя «тонкий неразрывный пробел» символ ( ), который ведет себя правильно.

http://jsfiddle.net/RJ6KW/4/