css: div внутри встроенного блока не переносит строку

Question

Я хочу сделать div, который будет оборачивать его линию на основе внешней ширины div.Проблема в том, что внешний div имеет «Display: inline-block».HTML:

<div class="option__description">
  {{optionItem.description}}
</div>

CSS:

:host {
  content: '';
  display: inline-block;
  cursor: pointer;

  width: 50%;
  height: 100%;
}

.option__description{
  width: 100%;
  max-width: 100%;

  word-wrap: break-word;
}

Я пробовал несколько вещей, таких как добавление внешнего div с помощью display: flex.это не сработало ...

изменить 2: https://stackblitz.com/edit/basic-option-menu?file=src%2Fapp%2Foption-menu%2Foption-item%2Foption-item.component.css

Answer 1

Попробуйте это stackblitz :

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

Вот совок:

• overflow-wrap: break-word; гарантирует, что длинная нить обернется и не вылетит изконтейнер.Вы также можете использовать перенос слов, потому что, как говорится в спецификации, они буквально являются просто альтернативными именами друг для друга.Некоторые браузеры поддерживают один, а не другой.Firefox (протестированный v43) поддерживает только word-wrap.Blink (проверенный Chrome v45) возьмет любой из них.
• Поскольку overflow-wrap используется сам по себе, слова будут ломаться почти везде, где им нужно.Если есть символ «приемлемого разрыва» (например, буквальный тире), он сломается там, в противном случае он просто делает то, что ему нужно.
• Вы также можете использовать hyphensпотому что тогда он попытается со вкусом добавить дефис, где он ломается, если браузер поддерживает его (Blink не делает во время написания, Firefox делает).
• word-break: break-all; должен сказать браузеру, что все в порядкесломать слово везде, где это нужно.Несмотря на то, что в любом случае это так, я не уверен, в каких случаях это необходимо на 100%.

source <- вся статья полезна.Прочитайте это! </p>

Я также рекомендую вам этот поток StackOverflow: В чем разница между "word-break: break-all" и "word-wrap: break-word" в CSS

Answer 2

Я нашел проблему.в компоненте option-row у меня было:

white-space: nowrap;

это блокирует перенос текста.

Я изменил его обратно на пробел: обычный в компоненте option-item.

Вы можете проверить мой второй пример, если вам нужно больше деталей.

Answer 3

При просмотре вашего примера содержимое переносится нормально.Я думаю, что речь идет о длинных словах, которые не ломаются.Используйте overflow-wrap: break-word; на вашей внутренней оболочке, чтобы включить это поведение.Пример: https://stackblitz.com/edit/basic-bootstrap-xrydq7