如何用Web写单多行文本省略号......

单行文本省略号... 

核心css代码如下:

1.overflow:hidden;  (意思就是超出你限定的宽度它就会隐藏内容)。

2.white-space:nowrap;   (这个是设置文字在一行显示不能换行)。

3.text-overflow:ellipsis;    (这个规定当文本溢出时显示省略号来代表被修剪的部分)。

单行文本省略号就完了,是不是很简单呢!

然后,我们一起来看一下多行文本省略号!




多行文本省略号...

核心css代码如下:

1.-webkit-line-clamp:2;  (用来限制在一个块元素显示的文本行数,“2”表示最多显示为2行。PS:为了实现该效果,他需要组合其他webkit属性)。

2.display:-webkit-box;   (和1结合使用,将对象作为弹性伸缩盒子显示)。

3.-webkit-box-orient:vertical;   (和1结合使用,设置或检索伸缩盒对象的子元素的排列方式)。

4.overflow:hidden;   (顾名思义就是超出限定的宽度就隐藏内容)。

5.text-overflow:ellipsis;   (文本溢出时用省略号显示)。

好了,现在多行文本省略号就完了,觉得有用的可以关注一下我哦!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容