Словосочетание Firefox прерывает короткие слова в случайных точках

Я break-word в контейнере, так что чрезвычайно длинные слова не будут переполняться. Хотя Chrome и Safari справляются с этим очень хорошо, кажется, что Firefox и IE любят прерывать слова случайным образом - даже короткие слова, в самых смешных моментах. Смотрите скриншоты ниже:

Вот код, который я использую, чтобы предотвратить разрыв слов:

.break-word {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

Это CSS, который я использую для контейнера и текста:

.wrap {
position: relative;
text-align: center;
margin: 40px auto 20px;
padding: 50px;
border: 4px double #f7f7f7;
display: block;
}
.quote-text {
font-size: 40px;
line-height: 50px;
font-weight: 400;
}

HTML

   <div class="wrap break-word">
     <div class="row-fluid quotation-marks">&ldquo;&rdquo;</div>
     <span class="quote-text">
       Having a partner definitely allows you to take more risks.
     </span>
     <span class="author">Arianna Huffington</span>
   </div>

Почему это происходит? Любые подсказки о том, как я могу заставить слова нормально ломаться во всех браузерах? Firefox определенно является приоритетом.

Спасибо заранее!

Ответ 1

Вы удваиваете параметры CSS. Попробуйте это.

.break-word {
-ms-word-break: break-all;
-ms-word-wrap: break-all;
-webkit-word-break: break-word;
-webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

Ответ 2

Я сделал временное исправление, изменив код моего слова:

.break-word {
word-break: break-word;
word-wrap: break-word;
}

Слова уже не странные. Я просто не уверен, насколько это безопасно с точки зрения кросс-браузерной поддержки (поскольку я тестировал только последние версии Chrome, Firefox и Safari).

Очевидно, что перенос поддерживается только при явном объявлении en-US. Если у кого-то есть более верный ответ/объяснение, я с радостью приму ваш ответ.

Ответ 3

Удалите word-break: break-all. Его смысл в том, что он создает точную проблему, которую вы описываете: браузеру поручено разбить слова на куски по своему усмотрению.

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

Перенос имеет гораздо больший смысл, но он имеет ограниченную поддержку браузера, и по очевидным причинам он требует, чтобы язык текста был объявлен (поскольку правила переносов сильно зависят от языка). Вы можете использовать перенос на основе JavaScript, например Hyphenator.js, чтобы иметь дело с браузерами, которые не поддерживают перенос CSS

Ответ 4

word-break:keep-all;

решил проблему для меня