在单词边界处打破非连字符复合词

Question

我正在使用Bootstrap.让我们说我的文字看起来像这样:

"堆栈溢出"

如果文本不适合容器,我可以以某种方式自动确保它像这样打破:

"Stack
-overflow"

代替:

"Stackov
-erflow"

用HTML/CSS？

Answer 1

你可以插入(软连字符)

#box {
  font-size:14px;
  font-family:courier;
  width:90px;
  background:yellow;
 }

<div id="box">Stack&shy;overflow</div>

如果你不能使用``因为你没有使用(X)HTML(XML,Markdown,纯文本......)的某些变体,你可以使用等效的Unicode字符U + 00AD(``in XML). (16认同)

Answer 2

您可以使用<wbr>标签:

p {
  width: 60px;
  border: 1px solid black;
}

<p>Stack<wbr>overflow</p>

Answer 3

不,对于文档"Stackoverflow"是一个单词.如果您使用CSS属性来破坏该单词,那么它将根据可用空间中断.

如果要从特定点打破它,则必须定义它.

你可以使用Stack<wbr>overflow或Stack-overflow.

如果使用Stack<wbr>overflow,那么它将被打破<wbr>.

p.test1 {
    width: 60px;
    border: 1px solid #000000;
}

<p class="test1">Stack<wbr>overflow</p>

或者,如果使用Stack-overflow和使用CSS属性word-break: keep-all;,它将在连字符处断开:

p.test1 {
    width: 60px;
    border: 1px solid #000000;
    word-break: keep-all;
}

<p class="test1">Stack-overflow</p>

但你必须定义其中一个.