css只显示一行多出省略号

在网页设计中，有时候我们会需要限制特定元素的显示行数，如果超出了限定行数，就只显示一行并在末尾加上省略号。这个功能可以通过CSS来实现。

/* 设置元素最多显示1行 */
.one-line {
  display: -webkit-Box;
  -webkit-line-clamp: 1;
  -webkit-Box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

这里用了一个CSS属性：webkit-line-clamp，这个属性只在WebKit浏览器中有效，它的作用就是限制元素的显示行数。我们将它设置为1即可实现一行显示的效果。

接下来，我们还需使用以下样式对元素进行调整：

/* 设置元素只显示一行并不换行 */
.one-line {
  display: -webkit-Box;
  -webkit-line-clamp: 1;
  -webkit-Box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

这里我们将元素的显示方式设为-webkit-Box，并将方向设置为垂直，这样可以让元素按照垂直方向排列。在限制只显示1行后，将overflow属性设为hidden，意思是超出部分将隐藏。最后，我们再将text-overflow属性设置为ellipsis，这样就可以在超出一行时在末尾加上省略号。

这样，我们就可以使用以上CSS样式实现在网页中只显示一行多出省略号的效果。