HTML单行、多行超出不换行显示省略号使用Clamp.js兼容IE

简介: HTML单行、多行超出不换行显示省略号使用Clamp.js兼容IE

1、单行超出不换行,显示省略号

width: 770px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

2、多行超出不换行,显示省略号

width: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /*限制文本行数*/
-webkit-box-orient: vertical;

3、兼容万恶的IE

使用这几条css属性不兼容火狐和IE 所以采用插件的形式

可以使用 Clamp.js

https://github.com/josephschmitt/Clamp.js

代码示例

var titles = document.getElementsByClassName("p-title");
for (var i = 0; i < titles.length; i++){
    // 显示3行
    $clamp(titles[i], {clamp: 3});
}

实践发现:

  1. Clamp.js的表现不是太好
  2. 在 IE11下-webkit-line-clamp: 2 也是可以生效的,不过不显示...,重要的是需要设置【元素宽度】

其他组件

HeyUI:https://www.heyui.top/component/other/textellipsis

vue-text-ellipsis:https://github.com/Luobata/vue-text-ellipsis


参考

文本超出两行显示省略号插件Clamp.js

深入扩展文本溢出解决方案

相关文章
|
8天前
|
编解码 移动开发 前端开发
什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
24 0
|
8天前
|
前端开发
HTML中的pre标签表示空格或换行
HTML中的pre标签表示空格或换行
|
8天前
|
移动开发 前端开发 JavaScript
什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的 IE?
什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的 IE?
|
8天前
|
前端开发 搜索推荐
【HTML专栏4】常用标签(标题、段落、换行、文本格式化、注释及特殊字符)
【HTML专栏4】常用标签(标题、段落、换行、文本格式化、注释及特殊字符)
21 0
|
8天前
|
前端开发 JavaScript C++
HTML深度解析:掌握换行的艺术
【4月更文挑战第1天】
68 0
HTML深度解析:掌握换行的艺术
|
8天前
|
SEO
如何像人类一样写HTML之标题、段落、换行、水平线与文本格式化标签
如何像人类一样写HTML之标题、段落、换行、水平线与文本格式化标签
如何像人类一样写HTML之标题、段落、换行、水平线与文本格式化标签
|
5月前
HTML的基本知识(二)——段落标签、强制换行标签、水平线标签、图片标签
HTML的基本知识(二)——段落标签、强制换行标签、水平线标签、图片标签
|
6月前
|
JavaScript
兼容IE浏览器
兼容IE浏览器
39 0
|
6月前
|
移动开发 前端开发
如何识别 String 里的 ‘\r\n‘ 让 HTML换行显示
如何识别 String 里的 ‘\r\n‘ 让 HTML换行显示
116 0
|
6月前
|
前端开发 JavaScript UED
css中什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
css中什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
28 0