css ломать слова только если пробелов нет

Question

У меня есть этот код:

.mydiv {
  display: table;
  table-layout: fixed;
  width: auto;
  max-width: 448px;
  height: 56px;
}

.mydiv span {
  display: table-cell;
  vertical-align: middle; 
  overflow: hidden;
}

<div class="mydiv">
  <span></span>
</div>

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

Но в единственном случае, когда в предложении нет пробелов (это никогда не должно происходить, но люди - это люди), интерфейс будет нарушен, и длинное слово останется в одной строке.

Есть ли способ расставить приоритеты css так, чтобы, если есть пробелы, предложение обрезалось без обрезания слов (word-wrap: break-word;), но если слово больше строки, обрыв строки, обрезание слова (word-break: break-all;), чтобы избежать визуальной катастрофы. В этой последовательности.

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

Любая помощь будет оценена.

Я бы хотел решение CSS, желательно, но если это невозможно, то решение JS/jQuery тоже подойдет.

PS: мне нужно, чтобы div имел автоматическую ширину с max-width, и мне нужно, чтобы span оставался ячейкой таблицы.

Answer 1

Вы можете сделать это с word-wrap: break-word но вы должны установить значение width собственность на 100% включить отзывчивость:

.mydiv {
  display: table;
  table-layout: fixed;
  width: 100%; /* responsiveness */
  max-width: 448px;
  height: 56px;
  border: 1px solid; /* just for demo */
}

.mydiv span {
  display: table-cell;
  vertical-align: middle; 
  overflow: hidden;
  word-wrap: break-word; /* added */
}

<div class="mydiv">
  <span>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</span>
</div>
<br>
<div class="mydiv">
  <span>short word ... short word ... short word ... short word ... short word ... short word ... short word ... short word ...</span>
</div>