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>

编辑重复的问题：给出的答案是错误的。

最好的（通过投票）回答建议替换连字符。这是不正确的，因为当没有换行时，这些连字符不会显示。
第二个答案表明wbr，但并不是所有的broswers都支持。
第三个最好的答案表明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中打破，您可以使用或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>

Answer 2

如果可以使用jquery：

＆＃13;

$(function() {
$('div').each(function() {
  $(this).html($(this).text().replace(/-/, '-<br>'));
});
});

＆＃13;

div{
  width:80px;
  border:solid 1px red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> bla bla-blablabla blablabla-blabla</div>

＆＃13;

<强>更新

＆＃13;

$('div').each(function() {
  $(this).html($(this).text().replace(/-/g, '<span></span>'));
});

＆＃13;

div{
  width:80px;
  border:solid 1px red;
}

span:after{
  content:"-";
  display:inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> bla bla-blablabla babababs sbba-blabla</div>

＆＃13;

Css打破连字符而不是溢出

2 个答案: