在数据表格里面后者是其他页面里面，当一行容纳不下内容时，有两种解决方案，一种是自动换行，一种是使用省略号，那么这个省略号是怎么通过css的来实现的呢？效果如图所示：
html代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>省略号</title>
</head>
<body>
<ul>
<li>比较长的标题比较常的标题比较长的标题，为了超出范围测试省略号的效果省略号</li>
<li>标题标题标题标题标题标题标题</li>
<li>标题标题标题标题标题标题</li>
<li>文字1文章2文章标题</li>
</ul>
</body>
</html>css代码是这样的：
<style>
ul{
list-style: none;
font-size: 13px;
font-family: '微软雅黑';
color: #333;
margin: 300px auto;
text-align: center;
width: 500px;
height: 200px;
background: pink;
}
ul li{
height: 40px;
line-height: 40px;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}
</style>可以看到控制省略号是通过三个属性达到的效果：overflow和white-sapce和text-overflow。
white-space：这个属性是用来规定如何处理元素内的空白，常用值是nowrap，表示文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
text-overflow:规定当文本溢出包含元素时发生的事情,取值clip/ellipsis，常与overflow和white-space配合以显示省略符号来代表被修剪的文本。
overfolow:这里取值为hidden，表示不显示溢出的部分。
824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
