css прервать слово с дефисом

Question

Я хочу разбить длинное слово с дефисом в конце первой строки.

Ожидаемое:

BERUFSBILDUNGSZENT-
RUM

Получил это:

BERUFSBILDUNGSZENT
RUM

Вот мой HTML и CSS:

<div class="content">BERUFSBILDUNGSZENTRUM</div>

.content {
  max-height: 80px;
  width: 200px;
  overflow-x: hidden;
  word-wrap: break-word;
  padding: 10px;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  font-weight: bold;
  font-size: 16px;
  border: solid 1px #000;
}

Вы можете проверить мой JSFiddle

Answer 1

Chrome, по-видимому, не использует переносы слов (по крайней мере, в Windows). Вы можете пожить лучше с другими браузерами или платформами. Ты можешь использовать ­ (мягкий дефис), если вы заранее знаете, где хотите сломаться. В противном случае, по крайней мере, в Chrome на Windows нет способа получить дефис, когда CSS разбивает длинное слово, если только он не был во вводе для начала.

.content {
  max-height: 80px;
  width: 200px;
  overflow-x: hidden;
  word-wrap: break-word;
  padding: 10px;
  font-weight: bold;
  font-size: 16px;
  border: solid 1px #000;
}

Using soft hyphen:
<div class="content">BERUFSBILDUNGSZEN&shy;TRUM</div>    

Using automatic hyphenation (doesn't work in Chrome)
<div class="content" lang="de" style="hyphens: auto; ">BERUFSBILDUNGSZENTRUM</div>

Soft hyphen not displayed if it doesn't break there
<div class="content" style="width: 400px; ">BERUFSBILDUNGSZEN&shy;TRUM</div>

Смотрите также этот ответ.

Answer 2

Решение в 2022 году:

Если вы добавите langАтрибутируйте свой div и введите «Berufsbildungszentrum» в обычном регистре, используя hyphens: auto;работает так, как ожидалось. Затем вы можете снова использовать заглавные буквы слова, используя text-transform: uppercase;.

Проверьте также обновленный JSFiddle

Answer 3

Добавить lang="de" Присвойте свой HTML-тег, так как браузер решает это с помощью алгоритма, который выбирается для этого языкового тега.