Question

这个溢出省略号似乎不起作用，看起来像文档示例我做错了什么？

＆＃13;

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

＆＃13;

<p>
  sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</p>

＆＃13;

Answer 1

您遗失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>

Answer 2

我们正在使用文本溢出：省略号;如果宽度溢出宽度和白色空间：nowrap;不使用nowrap“点缀效果不起作用”

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

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

文本溢出：省略号不工作 - 为什么？

2 个答案: