css：内联块内的 div 不会换行答案

【问题标题】：css: div inside inline-block won't wrap linecss：内联块内的 div 不会换行
【发布时间】：2018-10-16 22:13:56
【问题描述】：

我想制作一个 div，它会根据外部 div 的宽度来换行。问题是外部 div 有“显示：内联块”。 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;
}

我尝试了几种方法，例如添加带有 display: flex 的外部 div。没用……

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

【问题讨论】：

你能提供一个minimal reproducible example吗？
还不够小？
最小的、完整的和可验证的;)
所以我在我的代码上尝试了你的解决方案，但没有奏效。我将我的新示例放在编辑上方：对不起，我的新示例有点长，我会尝试上传一个更简单的示例，以便尽快显示问题...
好的，我现在已经清理了第二个示例。请检查一下。

标签： html css angular

【解决方案1】：

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

【讨论】：

它适用于我的第一个示例，但不适用于第二个示例
我回答的时候没有第二个例子；）aloisdg的答案很详细，研究得很好。
这是评论，不是答案，并且不允许将第三方网站的链接作为答案。请在此处形成您自己的答案。 stackoverflow.com/help/how-to-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。 Blink（经过测试的 Chrome v45）将采用其中之一。
在单独使用overflow-wrap 的情况下，单词会在需要的任何地方中断。如果有一个“可接受的中断”字符（例如，文字破折号），它将在那里中断，否则它只会做它需要做的事情。
您也可以使用hyphens，因为如果浏览器支持它，它会尝试优雅地添加一个连字符（Blink 在撰写本文时不支持，Firefox 支持）。
word-break: break-all; 是告诉浏览器可以在需要的地方断字。尽管它无论如何都会这样做，所以我不确定在什么情况下它是 100% 必要的。

source

我也向你推荐这个 StackOverflow 线程：What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS

【讨论】：

多年来没有人为此需要供应商前缀。这是过时的 CSS。如果你的标记与答案相关，你应该把它贴在这里，而不是那个 stackblitz 的东西。
我打赌你可以使用 SO 的工具在这里创建你的演示。
@Rob 随时提交我的帖子的编辑以及工作角度演示。我很乐意接受。

【解决方案3】：

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

white-space: nowrap;

这会阻止所有文本换行。

我已将其改回 white-space: normal in option-item 组件。

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

【讨论】：

这不能回答问题，因为您指的是在 SO 上无法查看的标记。