经常会遇到文字太多，而为了不打破原有布局，需要将多出文字用省略号代替，实现以下效果：
- 文字太太太太多多多啦......
- 这个不多。
html：这是个列表。ul/ol都行。
<ul>
<li>这是个短句子</li>
<li>403是因为服务器拒绝了你的地址请求，或者你根本没权限访问网站，提供身份验证也没用，也就是说，用户被禁止访问了。然而除非与Web服务器管理员联系，否则一旦遇到403状态码都无法自行解决。</li>
</ul>首先，省略号的css代码为：text-overflow: ellipsis; 注意，这行代码经常不起作用，是因为其必须满足两个条件：1、宽度必须设置；2、同时设置white-space: nowrap(不换行); 和overflow: hidden（超出部分隐藏）。因此，完整css代码：
li {
width: 200px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display:inline-block;//如果是一个inline标签，还需要加入这一行代码，因为对于inline标签，设置width没有用。这里是li标签，本来就是block，因此不需要。
}
但是，问题来了，对li设置overflow: hidden后，整个列表的list-style-type，又不起作用了，无论设置哪种小图标都没有用。
解决办法：ul添加设置list-style-position: inside;
但是！！！此时图标显示，溢出文字也隐藏了，但是省略号，又不知道哪里去了。。。。
最后我也不知道，为什么会造成这样的效果。但是，我有不屈不挠的精神，我吭哧吭哧，又开始了。。。。
我换了一种思路，在列表里修改样式，牵一发而动全身。我将要弄省略号的文字，用<span>包裹，就解决了。
<ul>
<li><span>这是个短文字</span></li>
<li><span>403是因为服务器拒绝了你的地址请求，或者你根本没权限访问网站，提供身份验证也没用，也就是说，用户被禁止访问了。然而除非与Web服务器管理员联系，否则一旦遇到403状态码都无法自行解决。</span></li>
</ul>
css代码：
span{
width: 200px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display:inline-block;//span是一个inline标签，设置width没有用。因此需要这句代码。
}ul{
list-style-type:circle;
/*list-style-position: inside;注意，不需要添加这行代码*/
}
既有列表符号，又有省略号。
结论：设置溢出文字，不要直接在li标签上设置，因为会有list-style-type的问题，还是包裹在span中，设置span省略号。
当需要多行文字省略末尾省略时：
/*-webkit-line-clamp用来限制在一个块元素显示的文本的行数*/
.dot1{
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
/*不支持多行文本溢出显示省略号*/
.dot2{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}View Code
/*-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
- 文字太太太太多多多啦......
- 这个不多。
html：这是个列表。ul/ol都行。
<ul>
<li>这是个短句子</li>
<li>403是因为服务器拒绝了你的地址请求，或者你根本没权限访问网站，提供身份验证也没用，也就是说，用户被禁止访问了。然而除非与Web服务器管理员联系，否则一旦遇到403状态码都无法自行解决。</li>
</ul>首先，省略号的css代码为：text-overflow: ellipsis; 注意，这行代码经常不起作用，是因为其必须满足两个条件：1、宽度必须设置；2、同时设置white-space: nowrap(不换行); 和overflow: hidden（超出部分隐藏）。因此，完整css代码：
li {
width: 200px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display:inline-block;//如果是一个inline标签，还需要加入这一行代码，因为对于inline标签，设置width没有用。这里是li标签，本来就是block，因此不需要。
}
但是，问题来了，对li设置overflow: hidden后，整个列表的list-style-type，又不起作用了，无论设置哪种小图标都没有用。
解决办法：ul添加设置list-style-position: inside;
但是！！！此时图标显示，溢出文字也隐藏了，但是省略号，又不知道哪里去了。。。。
最后我也不知道，为什么会造成这样的效果。但是，我有不屈不挠的精神，我吭哧吭哧，又开始了。。。。
我换了一种思路，在列表里修改样式，牵一发而动全身。我将要弄省略号的文字，用<span>包裹，就解决了。
<ul>
<li><span>这是个短文字</span></li>
<li><span>403是因为服务器拒绝了你的地址请求，或者你根本没权限访问网站，提供身份验证也没用，也就是说，用户被禁止访问了。然而除非与Web服务器管理员联系，否则一旦遇到403状态码都无法自行解决。</span></li>
</ul>
css代码：
span{
width: 200px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display:inline-block;//span是一个inline标签，设置width没有用。因此需要这句代码。
}ul{
list-style-type:circle;
/*list-style-position: inside;注意，不需要添加这行代码*/
}
既有列表符号，又有省略号。
结论：设置溢出文字，不要直接在li标签上设置，因为会有list-style-type的问题，还是包裹在span中，设置span省略号。
当需要多行文字省略末尾省略时：
/*-webkit-line-clamp用来限制在一个块元素显示的文本的行数*/
.dot1{
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
/*不支持多行文本溢出显示省略号*/
.dot2{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}View Code
/*-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
