单行文本省略号以及多行文本省略号的写法

首先我们来讲一下单行文本省略号的写法,代码如下,前提必须给一个宽

1

overflow:hidden;

超出限定的内容就隐藏
2

white-space:nowrap

设置文字在一行显示,不能换行
3

text-overflow:ellipsis;

超出文本的内容用省略号代替

列如

 

我是一只小小小小鸟,想要飞却怎么飞也飞不高

效果如下
微信截图_20190628210808.png

接下来是多行文本省略号的代码,也得给一个宽

1

-webkit-line-clamp:2;

最多显示两行
2

display:-webkit-box;

弹性盒模型显示
3

-webkit-box-orient:vertical;

4

overflow:hidden;

超出限定的内容就隐藏

5

text-overflow:ellipsis;

裁剪超出的内容,这个可以省略,
列如

那些年你很冒险的梦,我陪你去疯

截图.png

你可能感兴趣的:(单行文本省略号以及多行文本省略号的写法)