新闻列表中，常用的文字超出后显示省略号..

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本超出后显示省略号...</title>
<style type="text/css">
ul li{list-style-type: none;}
a{color: #000000;text-decoration: none;}
a:hover{color: #999999;}
li {
width:200px;
white-space:nowrap; /*强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。 */
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;
-moz-text-overflow:ellipsis;
overflow: hidden;
}
/* firefox only wtf is? pls let me know*/
li:not(li) {
clear: both;
}
li:not(li) a {
max-width: 175px;
float: left;
}
li:not(li):after {
content: "...";
float: left;
width: 25px;
padding-left: 5px;
color: #df3a0e;
}

</style>
</head>
<body>
<div class="nwes">
<ul>
<li><a href="">这里是新闻标题，今天晚上会下雨</a></li>
<li><a href="">这里是新闻标题，今天晚上会下雨</a></li>
<li><a href="">这里是新闻标题，今天晚上会下雨</a></li>
<li><a href="">这里是新闻标题，今天晚上会下雨</a></li>
<li><a href="">这里是新闻标题，今天晚上会下雨</a></li>
<li><a href="">这里是新闻标题，今天晚上会下雨</a></li>
<li><a href="">这里是新闻标题，今天晚上会下雨</a></li>
<li><a href="">这里是新闻标题，今天晚上会下雨</a></li>
<li><a href="">这里是新闻标题，今天晚上会下雨</a></li>
<li><a href="">这里是新闻标题，今天晚上会下雨</a></li>
</ul>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/xf-note/p/4967748.html

新闻列表中，常用的文字超出后显示省略号..相关推荐

css设置内容超出后显示省略号
在写前端页面时,通常会遇到文字超出后显示省略号: 页面本来是这个样子的,第一行的文字超出已经压倒了下面的文字, 第一步,使用overflow: hidden把超出的内容进行隐藏,页面变成了这样第二步 ...
关于用css实现的文字超出部分显示省略号
文字超出部分显示省略号还是比较常用的一个效果,最近看到网上的一些方法亲自实践了一下,发现有些以前一些浏览器不能用的属性现在可以用了,于是研究了一番,现总结如下: 我们先来看下HTML代码: <d ...
css设置不显示超出内容_显示...,css设置内容超出后显示省略号
1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...
html 文字超出部分,CSS控制文字超出部分显示省略号方法
我们经常会看到有些网站比较长的字符就会显示省略号了,实现这种效果有两个办法,一种利用程序截取字符,另一种利用css实现超出部分显示省略号,下面我来介绍第二种. 测试浏览器: IE6/7/8/9.ope ...
CSS文字超出部分显示省略号
一行内超出显示省略号 overflow:hidden; /*超出的部分隐藏起来*/ text-overflow:ellipsis;/*超出文本以省略号 */ white-space:nowrap;/* ...
css 文字超出部分显示省略号
设置table固定布局,否则自适应布局会不受控制 table{table-layout: fixed;} 单行文字 : overflow: hidden; text-overflow:ellipsis ...
文字超出三行显示省略号
如下: overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit- ...
css 文字超出隐藏显示省略号
单行文本 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
css 文字超出三行展示省略号
文字超出三行显示省略号: <style type="text/css">div{width: 100px;overflow: hidden;text-overflow: ...

新闻列表中，常用的文字超出后显示省略号..

新闻列表中，常用的文字超出后显示省略号..相关推荐

最新文章

热门文章