Question

我正在寻找一种对文本使用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中使用的替代方法，是否有解决方法？

Answer 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

如何在文本内链接中使用“断字：断字”？

1 个答案: