Есть ли способ сделать слово «break-all» сломанным словом более умным?

Question

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

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

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

Answer 1

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

word-break: break-word; 

Это нестандартное свойство поддерживается Chrome, который ведет себя почти как word-wrap: break-word. Однако, когда they tried to remove it, они заметили

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

CSS-РГ resolved в

Добавить word-break: break-word в спецификации, если край/Firefox считают критическим достаточно Web Compat для его реализации.

Это может стать стандартом.

---

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

table-layout: fixed; 

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

Answer 2

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

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

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

Источник - Mozilla Developer Network

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

Источник - Mozilla Developer Network

Answer 3

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

Hydro­philius Pono­clacti­vizius 

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

Hydrophilius Ponoclactivizius 

или

Hydrophilius Pono- 
clactivizius 

или

Hydrophilius 
Ponoclacti- 
vizius 

или

Hydro- 
philius 
Pono- 
clacti- 
vizius