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

html-css010

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

前提是要固定宽度,如下

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

而在样式中加上 overflow:hiddenwhite-space:nowraptext-overflow:ellipsis

这段代码的意思是超出50px的长度后,后面以省略号显示。

1、新建一个html页面。

2、在html代码页面找到<body>标签,在<body>标签里创建一个<p>标签,然后输入显示的内容并添加一个class类为 class="cont"。

3、找到<title>标签,在这个标签下面创建一个<style>标签,在<style>标签里设置class为cont的样式内容超出后为隐藏<style>.cont{overflow: hidden/*内容超出后隐藏*/}</style>。

4、为cont类添加内容显示为一行:white-space: nowrap,内容超出后显示为省略号:text-overflow: ellipsis。

5、保存好代码后使用浏览器查看效果。

这段代码是可以的 但是用css来实现截字的话 只对ie有效 火狐是没有省略号的

<style>

*{font-size:12pxmargin:0padding:0}

.fr{float:right}

ul li{width:300px}

ul li a{width:200pxoverflow:hiddentext-overflow:ellipsiswhite-space:nowrapdisplay:inline-block}

</style>

<ul>

<li><span class="fr">2010-12-21</span><a href="#">刑法草案仍维持此前拟取消13个死刑罪名规定</a></li>

<li><span class="fr">2010-12-21</span><a href="#">刑法草案仍维持此前拟取消13个死刑罪名规定</a></li>

<li><span class="fr">2010-12-21</span><a href="#">刑法草案仍维持此前拟取消13个死刑罪名规定</a></li>

<li><span class="fr">2010-12-21</span><a href="#">刑法草案仍维持此前拟取消13个死刑罪名规定</a></li>

</ul>