html 自动换行在 / 或 @ 周围的 url 上中断

Question

我想知道我可以做些什么来让我的文本在页面上的某个字符上中断，例如在我的页面上的 @ 或 / 上 [当它达到容器宽度时]。

div {
  width:200px;
  height:100%;
  background-color:palegreen;
}
p {
  background-color:green;
  overflow-wrap:break-word;
}

<div>
  1abc/def/efg/hij/[email protected]
  <br><br>
  2abc/def/efg/hij/[email protected]
  <br><br>
  3abc/def/efg hij/klmnopqrstuvwxyz.com


  <p>
    4abc/def/efg/hij/[email protected]
  </p>
  <p>
    5abc/def/efg/hij/[email protected]
  </p>
  <p>
    6abc/def/efg hij/klmnopqrstu
  </p>
</div>

有关 jsfiddle，请参阅：

https://jsfiddle.net/Abeeee/e3u5xck4/1/

是否有 CSS 工具可以解决此问题 - 或者是否有办法将标签插入到文本中以将 @ 或 / 括起来？

我想要类似的东西......

Answer 1

使用

word-break: break-all;

 将有助于解决您的问题并分解文本。

您可以在

此处阅读更多相关信息。

div {
  width:200px;
  height:100%;
  background-color:palegreen;
  word-break: break-all;
}
p {
  background-color:green;
  overflow-wrap:break-word;
}

<div>
  1abc/def/efg/hij/[email protected]
  <br><br>
  2abc/def/efg/hij/[email protected]
  <br><br>
  3abc/def/efg hij/klmnopqrstuvwxyz.com


  <p>
    4abc/def/efg/hij/[email protected]
  </p>
  <p>
    5abc/def/efg/hij/[email protected]
  </p>
  <p>
    6abc/def/efg hij/klmnopqrstu
  </p>
</div>