项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇博客是我个人对这种情况解决办法的归纳,欢迎各路英雄指教。
文本溢出省略号显示(条件): 1:不能让文本换行 white-space:nowrap 文本不换行 2:让超出的文本隐藏 overflow:hidden 让溢出的文本隐藏 3:让隐藏的文本省略号形式显示 text-overflow:ellipsis 让隐藏文本以省略号形式显示 4:盒子的宽度!!!
案例:
单行文字溢出打点:
<style>
*{
margin: 0;
padding: 0;
}
a,u{
text-decoration: none;
}
ul,li,ol{
list-style: none;
}
#con li a{
width: 100px;
display: block;
background: #52ff5c;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<body>
<div id="con">
<ul>
<li>
<a href="#">文本溢出显示省略号文本溢出显示省略号文本溢出显示省略号</a>
</li>
</ul>
</div>
</body>
多行文本省略号显示:
<style>
*{
margin: 0;
padding: 0;
}
a,u{
text-decoration: none;
}
ul,li,ol{
list-style: none;
}
#con li a{
width: 100px;
display: block;
background: #52ff5c;
/*单行文本不换行*/
overflow: hidden;
/* 以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本*/
text-overflow: ellipsis;
/*将对象作为弹性伸缩盒子模型显示*/
display: -webkit-box;
/*用来限制在一个块元素显示的文本的行数,这是一个不规范的属性*/
-webkit-line-clamp: 3;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient: vertical;
}
</style>
<body>
<div id="con">
<ul>
<li>
<a href="#">多行文本溢出显示省略号文本溢出显示省略号文本溢出显示省略号</a>
</li>
</ul>
</div>
</body>