Слово CSS с использованием символов сначала

Question

Я не считаю правило слишком приятным в глазах в определенных ситуациях, потому что оно имеет тенденцию ломать длинные строки в неправильных местах при правильном условии.

Он производит что-то вроде этого:

|--- DIV ---| 
|   | 
| English/S | 
| panish | 
|   | 
|-----------| 

вместо

|--- DIV ---| 
|   | 
| English/ | 
| Spanish | 
|   | 
|-----------| 

Есть ли способ для меня, чтобы точно настроить мои правила CSS так, что он пытается разорвать слова через символы, прежде чем нарушая фактические слова? Если да, то как мне это сделать?

Answer 1

Я думаю, что единственным способом добиться такого поведения является использование <wbr> (mdn link) в вашей разметке в позиции, которую вы хотите вызвать для разрыва слова.

Посмотрите:

.word-box{ 
 
    width:100px; 
 
    margin:5em; 
 
    border:1px solid #606266; 
 
}

<div id='break-wbr' class='word-box'> 
 
English/<wbr>Spanish 
 
</div>

Это также хорошо supported.

Другим способом сломать в положении, было бы с помощью застенчивого дефиса (­)

.word-box{ 
 
    width:100px; 
 
    margin:5em; 
 
    border:1px solid #606266; 
 
}

<div id='break-shy' class='word-box' lang='en'> 
 
English/&shy;Spanish 
 
</div>

но недостаток использования застенчивых дефисов, что он вставляет видимый дефис в точке разрыва слова.

Вы также можете взглянуть на очень похожий и более подробный ответ here.

Answer 2

Попробуйте добавить это. word-break: keep-all;