html - 打破连字符而不是溢出

Question

我在 div 中有一段文字里面有一个连字符。当 div变得太小，文本会溢出而不是在连字符处中断。

我试了一下 word-break和 overflow ，但无法弄清楚如何使文本在连字符处仅中断。这是正在发生的事情以及我正在努力实现的目标的示例。

div{
  width:70px;
  border:1px solid;
}

<b>How it is now </b>
<div> bla bla-blablabla</div>
<br>

<b> What should happen: </b>
<div> bla bla-<br>blablabla</div>

编辑重复问题:那里给出的答案是错误的。

1. 最佳(投票)答案建议将连字符替换为 ­ .这是不正确的，因为如果没有换行符，这些连字符将不会显示。
2. 第二个答案建议 <wbr> , 但并非所有浏览器都支持。
3. 第三个最佳答案建议使用 CSS 自动换行，这不会使其在连字符处中断。

Answer 1

使用 word-wrap: break-word 并在没有更多空间时中断。不是在“我们”想要的时候。

div {
  width: 70px;
  border: 1px solid;
}
div:first-of-type {
  word-wrap: break-word
}

<b>How it is now </b>
<div>bla bla-blablabla</div>
<br>

<b> What should happen: </b>
<div>bla bla-
  <br>blablabla</div>

更新 因为你真的想在 hyphen 中打破 only 你可以使用 ­ 或 wbr

div {
  width: 70px;
  border: 1px solid;
}

<b>How it is now </b>
<div>bla bla-blablabla</div>
<br>

<b> What should happen: </b>
<div>bla bla-
  <br>blablabla</div>

<hr />
<b>How it is now using &amp;shy;</b>
<div>bla bla&shy;blablabla</div>
<br>

<b>How it is now using wbr</b>
<div>bla bla-<wbr>blablabla</div>
<br>