连字符后的换行符

Question

在FF 45上运行以下代码段时，两个框中的第一个只显示一行，如＃34; ThisIsATest ...＆＃34;，而第二个框显示两行，整个文本除以连字符。在Chrome和Edge上，两个框都显示两行。我的问题：如何在FF中的连字符后的第一个中断文本？显然，它与以下文本的长度有关，但原因是什么？

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

我想实现这种行为（已经在Chrome和Edge中有效）：如果文本没有包含任何连字符或空格，请不要破坏它并显示＆＃34; ...＆＃34 ;。 如果文本包含空格或连字符，请在必要时将其分解。

更新

您可以删除文本溢出：省略号并获得类似的结果。现在，文本有时会被删除，有时候会有新的一行。我没有看到任何理由为什么两个相似的div（一个内容多一点）应该表现出如此不同的行为。

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

如果它是一个“真正的”连字符（即如果你不需要在所有东西都适合一行时显示“ - ”），你可以使用“软连字符”实体­：

ThisIsATest­Test

Answer 2

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

例如：

  

自动换行： break-word;

会产生两条线。

.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>

  

white-space： 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>

Answer 3

我在blog上找到了这个技巧，但我不知道是否会解决您的问题。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

您只需要向其父级添加以下css属性

white-space: nowrap;