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>
目录
相关文章
|
3天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
29 6
|
17天前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
24天前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
58 1
|
24天前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
20 0
|
2月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
2月前
|
缓存 JavaScript 前端开发
js和html代码一定要分离吗
JavaScript(JS)和HTML代码的分离虽非绝对必要,但通常被推荐
|
2月前
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
|
3月前
|
JSON 前端开发 JavaScript
使用html,css,js 实现一个龙年春节祝福卡片效果
使用html,css,js 实现一个龙年春节祝福卡片效果
57 4
|
3月前
|
JavaScript 算法 前端开发
学习 node.js 六 Markdown 转为 html,zlib
【8月更文挑战第19天】
21 0
|
3月前
|
JavaScript 前端开发
使用js,html,css实现歌词滚动的效果
使用js,html,css实现歌词滚动的效果
52 0