全国咨询热线:400-618-9090

首页技术文章正文

Web前端培训:CSS如何实现文本超出部分显示省略号

创建时间:2019-01-22 16:53:54.0 来源:黑马程序员

当文本的内容超出容器的宽度的时候,我们希望在其默认添加省略号以达到提示用户内容省略显示的效果。

我们观察如下效果,当文本超出一定宽度的以后,就显示省略号代替。

1548147094225_1.jpg      

实现文本超出部分显示省略号,我们可以分3步:

1. 书写HTML结构

2. CSS实现单行文字显示省略号

3. CSS实现多行文字显示省略号

一. 第一步 —— 书写HTML结构

目标 : 书写HTML结构,我用p标签包裹一定长度的文本内容

1548147099376_2.jpg      

小结 : 在body标签里写一个p标签放文本内容,但是其他标签也是可以的,建议使用块标签,比如div

二. 第二步 —— 单行文字显示省略号

目标 : 使用css属性width,white-space,overflow,text-overflow实现单行文字显示省略号

1. 给p标签设定一个固定宽度

1548147104098_3.jpg      

2. 让内容溢出不换行

/*让内容溢出不换行*/

white-space:nowrap;

1548147109279_4.jpg      

3. 让超出的内容隐藏

/*让超出的内容隐藏*/

overflow:hidden;

1548147114700_5.jpg      

4. 让超出的内容用省略号显示

/*让超出的内容用省略号显示*/

text-overflow:ellipsis;

1548147120555_6.jpg     

小结 : 使用white-space,overflow,text-overflow需要同时设置,缺一不可,并且需要给元素设置宽度

三. 第三步 —— 多行文字显示省略号

目标 : 使用css属性width,overflow,text-overflow,display,box-orient,line-clamp实现多行文字显示省略号

1. 让超出内容隐藏,超出内容用省略显示,不需要让内容溢出不换行

/*让超出的内容隐藏*/

overflow:hidden;

/*让超出的内容用省略号显示*/

text-overflow:ellipsis;

1548147125269_7.jpg      

2. 指定为弹性伸缩盒子,子元素垂直排列显示,显示多少行内容

/*作为弹性伸缩盒子模型显示*/

display:-webkit-box;

/*设置伸缩盒子的子元素排列方式--从上到下垂直排列*/

-webkit-box-orient:vertical;

/*指定显示的多少行*/

-webkit-line-clamp:3;

1548147129945_8.jpg      

小结 :

1. 让超出的内容隐藏overflow:hidden;

2. 让超出的内容用省略号显示text-overflow:ellipsis;

3. 作为弹性伸缩盒子模型显示display:-webkit-box;

4. 设置伸缩盒子的子元素排列方式--从上到下垂直排列-webkit-box-orient:vertical;

5. 指定显示的多少行-webkit-line-clamp:3;

总结

CSS实现文本超出部分显示省略号的主要步骤:

1. 书写HTML结构,用一个标签包裹内容,也可以指定这个标签的宽度,如果不指定就会根据浏览器的宽度变化而变化

2. 单行文字显示省略号

/*让内容溢出不换行*/

white-space:nowrap;

/*让超出的内容隐藏*/

overflow:hidden;

/*让超出的内容用省略号显示*/

text-overflow:ellipsis;

3. 多行文字显示省略号

/*让超出的内容隐藏*/

overflow:hidden;

/*让超出的内容用省略号显示*/

text-overflow:ellipsis;

/*作为弹性伸缩盒子模型显示*/

display:-webkit-box;

/*设置伸缩盒子的子元素排列方式--从上到下垂直排列*/

-webkit-box-orient:vertical;

/*指定显示的多少行*/

-webkit-line-clamp:3;

在线咨询 我要报名