关于单行、多行文本超出显示省略号... css

这两天工作不是很忙，有空就整理整理之前在项目中碰到的一些问题。先来一个简单的文本溢出问题：

对于单行文本溢出问题：

p{

width: 200px;

height: 150px;

overflow: hidden; //超出部分隐藏

white-space: nowrap; //将文本限制在一行

text-overflow: ellipsis; //出现省略号

}

对于多行文本（段落）溢出问题：

【思路】：在段落最后用<i>...</i>模拟省略号

【html代码】：

<div class="box">《十万个为什么》是少年儿童出版社在20世纪60年代初编辑出版的一套青少年科普读物。50年来，这套书先后出版了6个版本，累计发行量超过1亿册，是新中国几代青少年的科学启蒙读物，已经成为中国原创科普图书的第一品牌。它在传播知识、普及科学方面发挥了积极的作用，影响几代青少年走上了科学的道路。受其影响，冠以“十万个为什么”的图书层出不穷，成为少儿科普类图书的代名词。

第六版《十万个为什么》于2013年8月13日首发，以全新面貌再次走进读者视野。和第五版相比，第六版的内容近九成都是全新的“为什么”。[1] 1956年，中央发出“向科学进军”的号召以后，作为当时仅有的两家专业少儿出版社之一的少年儿童出版社，编辑们很受鼓舞，一心想为孩子们出一些科普好书，打破当时科普读物非薄即少的现状，然而1958年，他们和全国人民一样经历了一场令人难忘的“大跃进”，由于各方面都不成功，编辑们也从只讲速度、不讲质量的图书生产上停下来，思考只有注重质量才是唯一的正道。

<a class="ellipsis"><i>...</i></a>

</div>

【css代码】：

.box {

position: relative;

width: 800px;

height: 150px;

overflow: hidden;

}

.ellipsis {

position: absolute;

bottom: 0;

right: 15px;

}

.ellipsis i {

display: inline-block;

width: 20px;

height: 25px;

background: #fff;

}