css实现单行多行文本溢出显示省略号 – CSS – 前端，css3兼容哪些浏览器

字体颜色css，ionic css 居中，tip弹框css，html css重点整理，用myeclipse怎么写css，css 一条虚线6，css3兼容哪些浏览器 css实现单行多行文本溢出显示省略号 - CSS - 前端，css3兼容哪些浏览器

基础设置

在介绍下面的方法之前，大家先对所有的例子进行基础的样式设置

/*基础设置*/div.box{width:100px;height:100px;border:1pxsolid#ddd;color:#333;line-height:1.8;margin:30pxauto;
}

设置好啦，现在大家开始表演=.=

1.单行溢出隐藏显示…

<!--单行溢出隐藏显示...--><divclass="boxtext-box1">
<p>目录结构清晰是首要目标，至于命名只要能达到表意的目的即可。目录结构清晰</p></div>/*1.单行溢出隐藏显示...(在文字的容器上设置)*/
.text-box1p{
white-space:nowrap;/*超出的空白区域不换行*/
overflow:hidden;/*超出隐藏*/
text-overflow:ellipsis;/*文本超出显示省略号*/
}

偶一定要把每一步都记得清清楚楚，因为偶发现不写清楚为什么这样设置，过段时间真的会忘了。
运行效果：
字体颜色css，ionic css 居中，tip弹框css，html css重点整理，用myeclipse怎么写css，css 一条虚线6，css3兼容哪些浏览器 图片描述

2.多行溢出隐藏显示…

<!--多行溢出隐藏显示...（只兼容webkit内核的浏览器）--><divclass="boxtext-box2">
<p>目录结构清晰是首要目标，至于命名只要能达到表意的目的即可。目录结构清晰</p></div>/*2.多行溢出隐藏显示...(在文字的容器上设置)只兼容webkit内核的浏览器*/
.text-box2p{
display:-webkit-box;/*将对象转为弹性盒模型展示*/
-webkit-box-orient:vertical;/*设置弹性盒模型子元素的排列方式*/
-webkit-line-clamp:2;/*限制文本行数*/
overflow:hidden;/*超出隐藏*/
}

运行效果：
字体颜色css，ionic css 居中，tip弹框css，html css重点整理，用myeclipse怎么写css，css 一条虚线6，css3兼容哪些浏览器 图片描述

3.多行溢出隐藏显示…

<!--多行溢出隐藏显示...(跨浏览器兼容+伪元素定位)-->
<divclass="boxtext-box3">
<p>目录结构清晰是首要目标，至于命名只要能达到表意的目的即可。目录结构</p>
</div>/*3.多行溢出隐藏显示...(跨浏览器兼容+伪元素定位)*/.text-box3p{position:relative;line-height:1.4em;/*行高和height成倍数，这里以三行文本超出隐藏举例*/
height:4.2em;overflow:hidden;
}.text-box3p::after{/*若要兼容IE8需用:after*/
content:"...";/*替换内容比较灵活*/
position:absolute;bottom:2px;right:5px;padding:03px;background:#fff;/*颜色和文字背景保持一致*/
box-shadow:0010px#fff;/*边缘处理*/}

这种方式比较灵活，但是实现的效果可能会比较生硬，所以需要对边缘进行虚化处理。
运行效果：
字体颜色css，ionic css 居中，tip弹框css，html css重点整理，用myeclipse怎么写css，css 一条虚线6，css3兼容哪些浏览器 图片描述
意思是这个意思，或许会有更合适的方法进行处理