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

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

.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, чтобы, ЕСЛИ есть пробелы, предложение обрезалось без вырезания слов (перенос слов: break-word;), но ЕСЛИ слово больше строки, строка разрывается, вырезая слово (word-break: break-all;), чтобы избежать визуальной катастрофы. В этой последовательности.

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

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

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

PS: мне нужно, чтобы div имел автоматическую ширину с максимальной шириной, и мне нужно, чтобы диапазон оставался ячейкой таблицы.


html css word-wrap word-break
person Bachir Messaouri    schedule 09.01.2018    source источник

Ответы (1)


arrow_upward
10
arrow_downward

Вы можете сделать это с помощью 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>

person VXp    schedule 09.01.2018