Question

当内容超出父级宽度时，属性overflow-x会显示滚动条。我不想显示滚动条，而是显示三个点“......”如何实现？

Answer 1

overflow: hidden;
text-overflow: ellipsis;

这应该可以解决问题。

Answer 2

这仅适用于文字。

MDN - text-overflow

此属性仅影响溢出块的内容容器元素在其内联进展方向（不是文本例如，在盒子的底部溢出。文字可能会溢出当它被阻止包裹时（例如，由于'白色空间： nowrap'）或单个词太长而不适合。

＆＃13;

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #ddd;
}

＆＃13;

<div class="truncate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Anim consequat. magna in et ullamco laborum. qui ea laboris non dolore anim nulla dolor irure sint Excepteur do esse in nostrud consectetur tempor Excepteur ullamco proident, ut enim tempor laboris enim eiusmod exercitation ut sed anim Excepteur dolor enim elit, mollit minim culpa consectetur cupidatat consectetur magna commodo in ut sed eu irure amet, Ut Ut Lorem Excepteur occaecat eiusmod ut ipsum in.
</div>

＆＃13;

如果您需要一个适用于除文本以外的任何其他工作的解决方案，您可能需要考虑使用javascript。

当溢出-x时显示...的css属性是什么？

2 个答案: