首页 > 代码库 > css 文字超出部分显示省略号(原)
css 文字超出部分显示省略号(原)
单行超出省略号
#word1{width: 100px; text-overflow: ellipsis; overflow: hidden;}
几行超出省略号(只兼容webkit内核)
#wordN{ width: 100px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; 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: 0; bottom: 0; line-height: 20px; display: block; background: -webkit-linear-gradient(left, transparent, #fff 15%);}
首先需要补充一下的知识关于换行的（按照情况加入以下的换行css）
一、强制换行
1 word-break: break-all; 只对英文起作用，以字母作为换行依据。
2 word-wrap: break-word; 只对英文起作用，以单词作为换行依据。
3 white-space: pre-wrap; 只对中文起作用，强制换行。
以下的情况
这是css部分单行省略号
#word1{ width: 100px; height: 20px; line-height: 20px; text-overflow: ellipsis; overflow: hidden; }
下面是显示：
为什么会这样，因为在a后面有一个空格，自动换行了，所以省略号并没有显示。
下面是多行的情况
所以要规定一下换行的情况。
转载请注明出处：http://www.cnblogs.com/matthew9298-Begin20160224/
css 文字超出部分显示省略号(原)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。