Есть ли способ сделать умнее разбивающее слово CSS свойство умнее?

Question

Я пытаюсь разместить мой стол на маленьком экране (< 400 пикселей в ширину), поэтому я применил этот стиль к ячейкам таблицы…

#searchResults td {
    padding: 1px;
    word-break: break-all;
}

Но мой вопрос, могу ли я сделать эту функцию умнее? То есть обратите внимание на мою скрипку, https://jsfiddle.net/hk42jb5r/1/, что первое имя, "Dave Echoer", разбивает имя на "Dave Echt" и "er", если вы уменьшите экран до 320 пикселей в ширину. Поскольку в тексте есть пробел, было бы более целесообразно, чтобы разделение происходило в пробеле. Разрыв слова там не повлияет на ширину таблицы. Есть ли способ, которым я могу это сделать, когда это уместно?

Answer 1

Кажется, вы хотите поведение

word-break: break-word;

Это нестандартное свойство, поддерживаемое Chrome, которое ведет себя почти как word-wrap: break-word, Однако, когда они пытались удалить его, они заметили

В некоторых случаях (таблицы и display: table; макеты) word-break: break-word поведение отличается от word-wrap: break-word; и первый работает, как ожидалось.

РГ CSS решила:

добавлять word-break: break-word указать, если Edge/Firefox найдет его достаточно критичным для веб-совместимости для его реализации.

Так что это может стать стандартом.

---

Но в настоящее время, если вы хотите, чтобы ячейки таблицы были не менее ширины, чем самое длинное слово, и при этом избегать разбиения внутри слов, когда в этом нет необходимости, вы можете использовать

table-layout: fixed;

Обратите внимание, что это избавит от некоторых особых поведений таблиц, например, все столбцы будут одинаково широки, даже если их содержимое может лучше соответствовать другим условиям.

Answer 2

Я обычно не использую перенос слов в подобных ситуациях, но вместо этого ­ теги (= "мягкий дефис") в более длинные слова, в местах, где подходит перенос, например

 Hydro­philius Pono­clacti­vizius

Так что это будет отображаться в одной из следующих форм, в зависимости от ширины его контейнера:

Hydrophilius Ponoclactivizius

или же

Hydrophilius Pono-
clactivizius

или же

Hydrophilius 
Ponoclacti-
vizius

или же

Hydro-
philius 
Pono-
clacti-
vizius

Answer 3

Я получил это работает в вашем примере с:

word-break: normal;
overflow-wrap: break-word;

word-break Свойство CSS используется для указания, следует ли разбивать строки в словах.

Источник - Сеть разработчиков Mozilla

overflow-wrap Свойство используется, чтобы указать, может ли браузер разбивать строки в словах, чтобы предотвратить переполнение, когда неразрывная строка в противном случае слишком длинна, чтобы поместиться в ее содержащую рамку.

Источник - Сеть разработчиков Mozilla