html - 文字溢出:省略号不起作用-为什么？

此溢出省略号似乎不起作用，并且看起来像文档示例，我在做什么错呢？

Fiddle

p {
  width: 100px;
  height: 100px;
  word-break: break-all;
  border: 1px solid blue;
  overflow: hidden;
  text-overflow: ellipsis;
}

<p>
  sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</p>

最佳答案

您缺少white-space: nowrap;，在这种情况下也不需要word-break: break-all。

p{
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<p>
Some long text it is going to be ellipsed
</p>

如果您要说一个很长的单词而没有空格，那么您甚至不需要white-space: nowrap;

p{
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  overflow: hidden;
  text-overflow: ellipsis;
}

<p>
sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</p>

关于html - 文字溢出:省略号不起作用-为什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44778099/