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：flex。这没用...

编辑2： https://stackblitz.com/edit/basic-option-menu?file=src%2Fapp%2Foption-menu%2Foption-item%2Foption-item.component.css

Answer 1

查看示例时，内容正常包装。我想这是长篇不停的话。在内部包装上使用overflow-wrap: break-word;启用该行为。示例：https://stackblitz.com/edit/basic-bootstrap-xrydq7

Answer 2

尝试以下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。闪烁（经过测试的Chrome v45）将采用其中一种。
overflow-wrap本身全部使用，单词会在需要的任何地方中断。如果存在“可接受的中断”字符（例如，像破折号那样的字符），它将在此处中断，否则它将执行所需的操作。
您也可以使用hyphens，因为如果浏览器支持，连字符会尝试在断点处添加连字符（Firefox在编写时不支持闪烁）。
word-break: break-all;告诉浏览器可以在任何需要的地方打断单词。即使这样做还是可以的，所以我不确定在什么情况下100％必要。

source <-整篇文章都很有用。阅读！

我还建议您使用以下StackOverflow线程：What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS

Answer 3

我发现了问题。在选项行组件中，我有：

white-space: nowrap;

这将阻止所有文本换行。

我将其更改为空白：在选项项组件中为正常。

如果需要更多详细信息，可以查看第二个示例。

CSS：内联块内的div不会换行

3 个答案: