Question

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

“＃1”

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

“堆栈” -overflow“

而不是：

“Stackov
-erflow“

使用HTML / CSS？

Answer 1

您可以插入（软连字符）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用<wbr>标记：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

但你必须定义其中一个。

Answer 4

如果你想打破一个特定的单词，那么给出的答案将起作用 - 插入某种不可见的中断。正如所指出的那样，它确实会损害搜索结果，但并不像你想象的那么糟糕。

如果你想打破所有需要换行的复合词，而不需要手动进行检查，那么无法做到这一点，因为你需要上下文 - 敏感的英语语言分析，这意味着你需要一个人类的大脑来完成它。

考虑如何打破以下字符串：

lowrateslender.com
musictoyourears.com
heresearch.com
nakedsnow.com
picturespain.com
catspaying.net
attackshoes.com
williamsharp.net
andreward.net
goalsnow.net
hesstruck.net
artistrap.com
buildingskill.com
bearspray.com
atticsweep.com
matthewhale.com
singershaven.com
shoesworn.com
sinuscatscan.com
cometart.com
monkeyslap.com
scriptshack.com
nasalbum.com
moviesick.com
arizonasparesort.com
privateshot.com
nationsprinting.com
importcarshow.com

（从谷歌搜索中复制粘贴＆＃34;不明确的域名＆＃34;）

...即使给出了一个字典来识别这些术语中的整个单词，并在这些边界处插入破碎空间，你是否会将这些单词拆分为，例如，＆＃34;进口车出现＆＃34;或者＆＃34; import-cars-how＆＃34;。

编程的主要技能之一是识别需要自然语言处理的算法，并选择足够好的＃34;算法而不是浪费时间。就是这种情况。

Answer 5

您可以使用零宽度空间。只需在HTML中输入Stackoverflow即可。

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

5 个答案: