css 文字超出部分显示省略号(原)

时间:2020-12-14 16:37:40

单行超出省略号

#word1{width: 100px; text-overflow: ellipsis; overflow: hidden;}

几行超出省略号(只兼容webkit内核)

#wordN{ width: 100px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ; overflow: hidden;}

兼容写法(但是当文字不够长的时候省略号还是会存在,需要js判断一下)

#wordNV2{ width: 100px; position: relative; overflow: hidden; word-break: break-all; height: 60px; line-height: 20px;}
#wordNV2:after{content: '...'; width: 24px; height: 20px; position: absolute; right: ; bottom: ; line-height: 20px; display: block; background: -webkit-linear-gradient(left, transparent, #fff %);}

首先需要补充一下的知识关于换行的(按照情况加入以下的换行css)

一、强制换行
1、word-break: break-all; 只对英文起作用,以字母作为换行依据。

2、word-wrap: break-word; 只对英文起作用,以单词作为换行依据。

3、white-space: pre-wrap; 只对中文起作用,强制换行。

二、强制不换行

1、white-space:nowrap;

以下的情况

这是css部分单行省略号

#word1{ width: 100px; height: 20px; line-height: 20px; text-overflow: ellipsis; overflow: hidden; }

下面是显示:

css 文字超出部分显示省略号(原)为什么会这样,因为在a后面有一个空格,自动换行了,所以省略号并没有显示。

下面是多行的情况

css 文字超出部分显示省略号(原)

所以要规定一下换行的情况。

转载请注明出处http://www.cnblogs.com/matthew9298-Begin20160224/