Question

css怎样让HTML中超出的内容显示为省略号

Answer 1

文字超出了需要隐派手藏并显示省略号这个在工作中很多时候都要用到，我想很多人都碰到过吧，这个有两种解决方法
一是用程序开截取字符长度，这个其实也是可以的
第二种是用样式来做,这里主要介绍一下用样式怎么来做吧，我话也不多说了吧直接上代码吧，

css样式如下：
[css]
.css1{
color:#6699ff;border:1px #ff8000 dashed;
margin-bottom:20px;
width: 20em;/*不允许出现半汉字截断*/
}
.css2 {
overflow: hidden; /*自动隐藏文字*/
text-overflow: ellipsis;/*文字隐藏后添加省略号*/
white-space: nowrap;/*强制不换行*/
width: 20em;/*不允许出现半汉字截断*/谨哪
color:#6699ff;border:1px #ff8000 dashed;
}
[/css]

html代码如下：
[html]
<div class="css1">Web前端开发 – 专注于网站前端设计与Web用户体验</div>
<div class="css2">Web前端开发 – 专注于网站前端设计与Web用户体验祥羡码</div>
[/html]
<st这yle type=”text/css”>
.css1{
color:#6699ff;border:1px #ff8000 dashed;
margin-bottom:20px;
width: 20em;/*不允许出现半汉字截断*/
}

Answer 2

如果是块元素的话，大家在CSS那个块中添加这几行代码吧（这是多行含此枝的文字隐藏加省略号，比较通用）

overflow: hidden;/*自动隐藏文字谈敏*/
text-overflow: ellipsis;/*文字隐藏后添加省略号*/扒轿
display: -webkit-box;
-webkit-line-clamp:2; /*想要显示的行数*/
-webkit-box-orient: vertical;