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

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

            </div>
目录
相关文章
|
7天前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
7天前
|
前端开发 JavaScript
【汇总】前端开发中高频次使用的JS、CSS、HTML代码片段合集
【汇总】前端开发中高频次使用的JS、CSS、HTML代码片段合集
|
7天前
|
前端开发
HTML中的pre标签表示空格或换行
HTML中的pre标签表示空格或换行
|
7天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
23 1
|
7天前
|
移动开发 JavaScript HTML5
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
16 0
|
7天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
34 10
|
7天前
|
前端开发 搜索推荐
【HTML专栏4】常用标签(标题、段落、换行、文本格式化、注释及特殊字符)
【HTML专栏4】常用标签(标题、段落、换行、文本格式化、注释及特殊字符)
21 0
|
7天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
7天前
|
JavaScript C#
C#winForm程序与html JS交互调用
C#winForm程序与html JS交互调用
|
7天前
|
前端开发 JavaScript C++
HTML深度解析:掌握换行的艺术
【4月更文挑战第1天】
66 0
HTML深度解析:掌握换行的艺术