如何设置CSS样式使网页中过长的新闻标题后面以省略号显示

html-css09

如何设置CSS样式使网页中过长的新闻标题后面以省略号显示,第1张

在CSS中，text-overflow:ellipsis可以在文本隐藏时候在文本末尾加入省略号。所以如果Html里是用li写的。

 

li{text-overflow:ellipsisoverflow:hiddenwhite-space:nowrapdisplay:blockword-break:keep-all

本身不链接或者hover功能的元素也是可以实现它内部的元素隐藏

这样子就可以，你可以把li改成你的元素。

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：

div{

width: 100px

overflow:hidden

text-overflow:ellipsis

display:-webkit-box

-webkit-box-orient:vertical

-webkit-line-clamp:2

}

3、浏览器运行index.html页面，此时文字超过2行会自动把多余部分用省略号显示 。