连字符后换行答案

【问题标题】：Line break after hyphen连字符后换行
【发布时间】：2020-04-28 19:33:32
【问题描述】：

在 FF 45 上运行以下 sn-p 时，两个框中的第一个仅显示一行，如“ThisIsATest...”，而第二个框显示两行，整个文本除以连字符。在 Chrome 和 Edge 上，两个框都显示两行。我的问题：如何使第一个文本在 FF 中的连字符后中断？很明显，这和下文的长度有关，但这是什么原因呢？

.test {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #00bcd4;
  margin-bottom: 1rem;
}

<div class="test">
  ThisIsATest-Test
</div>

<div class="test">
  ThisIsATest-Test123
</div>

我想实现这种行为（在 Chrome 和 Edge 中已经可以使用）：如果文本不包含任何连字符或空格，请不要打断它并显示“...”。如果文本中包含空格或连字符，请在必要时将其断开。

更新：

您可以删除 text-overflow: 省略号并获得类似的结果。现在，文字有时会被截断，有时会换行。我看不出为什么两个相似的 div（一个内容多一点）应该表现出如此不同的行为。

.test {
  width: 100px;
  overflow: hidden;  
  background: #00bcd4;
  margin-bottom: 1rem;
}

<div class="test">
  ThisIsATest-Test
</div>

<div class="test">
  ThisIsATest-Test123
</div>

在 Windows 10 上的 FF 45.0.1 中，它目前看起来像这样：

【问题讨论】：

Firefox 中的行为是正确的。由于某种原因，Chrome 没有按应有的方式显示省略号。但这不是整体问题，我知道。
为什么 FF 中的行为有时会显示新行而有时不会被认为是正确的？这对我来说看起来不太一致......
您将溢出指定为省略号。 Firefox 正在这样做，而 Chrome 则没有。我不确定你是否想要那个。
我更新了问题 - 请参阅我的新代码示例。删除 text-overflow: ellipsis 没有帮助。对我来说，这看起来像是一种“随机”行为。这两个盒子的区别在哪里？只有它的内容。为什么有时文本会在边缘被截断，有时（在添加更多字符后）会跳转到新行？

标签： html css firefox

【解决方案1】：

如果它是“真正的”连字符（即，如果您不需要在所有内容都在一行中显示“-”），您可以使用“软连字符”实体&shy;：

ThisIsATest&shy;Test

【讨论】：

我实际上需要连字符。这对我来说只是一个非常奇怪的行为：正确显示更长的文本（两行）。有什么理由吗？

【解决方案2】：

将属性 word-wrap: break-word; 或 white-space: nowrap; 添加到您的测试类中，两个 div 将产生相同的行为。

例如：

自动换行：断字；

将产生两行。

.test {
  width: 100px;
  overflow: hidden;
  word-wrap: break-word;
  text-overflow: ellipsis;
  background: #00bcd4;
  margin-bottom: 1rem;
}

<div class="test">
  ThisIsATest-Test
</div>

<div class="test">
  ThisIsATest-Test123
</div>

空白： nowrap;

将产生一行省略号。

.test {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: #00bcd4;
  margin-bottom: 1rem;
}

<div class="test">
  ThisIsATest-Test
</div>

<div class="test">
  ThisIsATest-Test123
</div>

【讨论】：

好的，抱歉。我应该再详细说明一下。我不希望文本显示在一行中（这就是我创建第二个框的原因 - 这是“期望的行为”）。我希望文本在连字符后中断。如果没有连字符，则文本应显示在一行中。这确实适用于 Chrome，也适用于 FF 中连字符后的较长单词。我不明白的地方：为什么它不适用于我的第一个示例？
更新了！这是你想要的吗？
嗯，不是真的 - 抱歉。问题是：使用 word-wrap: break-word 会破坏“随机”这个词。我想在空格或连字符后打破这个词。（仅供参考：在德语中，我们有很多复合名词（不知道确切的翻译）。我们说的是“Smartpone-App”，而不是“智能手机应用程序”。所以它比两个词站在旁边多一点彼此（由空格分隔），但在许多情况下，在连字符处断开它们是有意义的。）

【解决方案3】：

我在blog 上发现了这个技巧，但我不知道是否能解决您的问题。

.test {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #00bcd4;
  margin-bottom: 1rem;

  -ms-word-break: break-all;
  word-break: break-all;

  word-break: break-word;

  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

<div class="test">
  ThisIsATest-Test
</div>

<div class="test">
  ThisIsATest-Test123
</div>

【讨论】：

你的测试代码像这样中断："ThisIsATest-Te" + "st" 因为单词中断：break-all;顺便说一句：断词：断词不存在，我假设您的意思是自动换行
标签 word-break 存在，但我从未使用过。 W3 上的specification。
您使用了 word-break: break-word，我想提一下它是无效的。 word-break 的可能值有：normal、break-all、keep-all、initial 和 inherit。您使用了没有指定的断词。再次阅读您的代码，您会明白我的意思 :-) 我在这里突出显示了它：link

【解决方案4】：

您只需将以下 css 属性添加到其父级

white-space: nowrap;

【讨论】：