Html css:div内部内联块赢得'；t包线

我想做一个div，它将根据外部div宽度来包裹它的线。 问题是外部div有“Display:inline block”。 HTML:

我尝试了几种方法，比如用display:flex添加outerdiv。 它不起作用

编辑2：

---

查看您的示例时，内容正常包装。我想这是关于长词不破的。使用

溢出换行：断开单词以启用该行为。
示例：
尝试以下方法：

独家报道如下：


溢出换行：断开单词确保长字符串将被包装，而不是从容器中弹出。您也可以使用wrap，因为正如规范所说，它们实际上只是彼此的替代名称。有些浏览器支持其中一种，而不支持另一种。Firefox（经过测试的v43）只支持
wordwrap
。闪烁（已测试Chrome v45）将使用其中一种

随着
overflow wrap
的单独使用，单词会在需要的任何地方断裂。如果有一个“可接受的中断”字符（例如文字破折号），它将在那里中断，否则它只执行它需要执行的操作
您也可以使用
连字符
，因为如果浏览器支持，它会尝试在断开的地方添加一个有品味的连字符（在编写本文时Blink不会，Firefox会）
断字：全部断字
是告诉浏览器可以在需要的任何地方打断单词。尽管它有点像这样，所以我不确定在什么情况下它是100%必要的

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

white-space: nowrap;

这将阻止所有文本换行

我已将其更改回选项项组件中的空白：正常

如果您需要更多详细信息，可以查看我的第二个示例。
能否提供一个？它不够小？最小、完整且可验证；）所以我在我的代码上尝试了你的解决方案，但没有成功。我将我的新示例放在编辑上方：很抱歉，我的新示例有点长，我将尝试上传一个简单的示例，很快就会显示问题……好的，我现在已经清理了第二个示例。请查看。它适用于我的第一个示例，但不适用于第二个示例当我回答时，没有第二个示例；）ALOISG的答案是详细的，并且经过了充分的研究。这是一个评论，不是一个答案，不允许链接到第三方网站作为答案。请在这里填写您自己的答案。这并不能回答问题，因为您引用的标记在此处无法查看。多年来，没有人需要供应商前缀。这是过时的CSS。如果你的标记与答案相关，你应该在这里发布，而不是stackblitz。我打赌你可以使用SO的工具在这里创建你的演示。@Rob可以提交我的文章的编辑和一个可用的演示。我很乐意接受。
:host {
  content: '';
  display: inline-block;
  cursor: pointer;

  width: 50%;
  height: 100%;
}

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

  word-wrap: break-word;
}

.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;

}

white-space: nowrap;