如何在文本内使用带有链接的“断词：断词”？答案

【问题标题】：How to use 'word-break: break-word' with link inside of text?如何在文本内使用带有链接的“断词：断词”？
【发布时间】：2019-11-06 01:21:14
【问题描述】：

我正在寻找一种解决方案，将 word-break: break-word 用于包含另一个元素（如 <a>）的文本，该元素也适用于 IE11 和 Edge。

目前我的示例如下所示：

.container {
  width: 150px;
  background-color: yellow;
  display: flex;
  flex-direction: row;
  word-break: break-word;
}

.item {
  display: contents;
}

<html>
<body>
  <div class="container">
    Text start and
    <a href="/" class="item">
      a long link that should wrap around
      </a> another part of the text
  </div>
</body>
</html>

我的预期结果是文本会像这样中断：

这适用于项目上的display: contents;，但不幸的是，IE11 和 Edge 不支持。

我找不到任何适用于 IE11 和 Edge 的替代方案，是否有任何解决方法？

【问题讨论】：

必须使用“display: flex;” ?
@doooooooofai 我可以接受任何解决方案
只需删除 flex .. 永远不要将文本容器设为 flexbox 容器 (stackoverflow.com/a/54903923/8620333)
是的，如果你去掉 flex 问题就解决了 wwww
谢谢，这实际上是我需要的小提示 :)

标签： html css

【解决方案1】：

你可以这样做：

HTML

<div class="container">
  Text start and <a href="/" class="item">a long link that should wrap around</a> another part of the text
</div>

CSS

.container {
  width: 150px;
  background-color: yellow;
  flex-flow: row wrap;
  word-break: break-word;
}

DEMO HERE

【讨论】：