如何在具有隐藏溢出的跨度中显示点（“...”）？

小编典典

如何在具有隐藏溢出的跨度中显示点（“...”）？

all

我的 CSS：

#content_right_head span
{
  display:inline-block;
  width:180px;
  overflow:hidden !important;
}

现在它正在显示 内容内容

但我想显示喜欢的 内容内容......

我需要在内容之后显示点。内容来自数据库动态。

阅读 69

2022-07-06

共1个答案

小编典典

为此，您可以使用text-overflow: ellipsis;属性。像这样写

span {

    display: inline-block;

    width: 180px;

    white-space: nowrap;

    overflow: hidden !important;

    text-overflow: ellipsis;

}


<span>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</span>

JSFiddle

2022-07-06