这两天工作不是很忙,有空就整理整理之前在项目中碰到的一些问题。先来一个简单的文本溢出问题:
对于单行文本溢出问题:
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;
}