使用代码实现文字在超出内容时显示省略号
代码 实现 使用 显示 内容 文字 超出 省略号
2023-06-13 09:11:15 时间
一行超出显示省略
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
<html>
<div class="box-42b6">演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字</div>
</html>
<style>
.box-42b6{
border: 1px solid #999;
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
:::
两行(多行)超出显示省略号
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
显示的行数由line-clamp
样式的值决定。
<html>
<div class="box2-42b6">演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字</div>
</html>
<style>
.box2-42b6{
border: 1px solid #999;
width: 200px;
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
:::
JS判断是否显示了省略号
有时候我们需要知道是否已经溢出,显示了省略号,可以用到clientHeight
和scrollHeight
的知识:
let cHeight = noWrapDiv.clientHeight;
let sHeight = noWrapDiv.scrollHeight;
if (sHeight > cHeight) {
console.log("已经溢出显示省略号");
} else {
console.log("没有溢出");
}
这里可以用于判断是否溢出显示展开收缩按钮。
知识点拓展
scrollHeight:元素内容的高度,包括由于溢出导致的视图中不可见内容。不包含滚动条、边框和外边距。
clientHeight:元素内容的可视区的高度,包含内边距,但不包括水平滚动条、边框和外边距。
offsetHeight:元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。
相关文章
- 手把手带你使用webpack4构建一个Vue开发编译环境,并实现代码分割,css代码分离
- 小样本利器3. 半监督最小熵正则 MinEnt & PseudoLabel代码实现
- 试试使用Spring Event组合@Async注解,轻松实现代码的解耦和异步
- php案例:用代码的方式创建目录+文件+写入数据(都由你定)
- html怎么动态获取系统时间_代码实现获取当前的地理位置
- 蜻蜓:GitLab结合fortify实现自动化代码审计实践
- WPF使用AvalonEdit实现代码高亮显示、搜索、替换功能
- Scott 数据 映射 MySQL代码实现分享
- 使用Redis编码实现良好的优化性能(使用redis代码)
- 无代码快速操作MySQL数据库,极简实现高效管理(mysql不打代码)
- 使用jscript实现二进制读写脚本代码
- JavaScript中使用构造函数实现继承的代码
- PHP图片文件上传实现代码
- jquery中实现简单的tabs插件功能的代码
- jquery查找select,并触发事件的实现代码
- php编程实现获取excel文档内容的代码实例
- PHP获取MySQL数据库里所有表的实现代码
- 使用jQuery操作Cookies的实现代码
- PHP中使用数组实现堆栈数据结构的代码
- asp.net中使用自定义控件的方式实现一个分页控件的代码
- 使用jquery实现div的tab切换实例代码
- 使用非html5实现js板连连看游戏示例代码
- 使用mutex实现应用程序单实例运行代码分享
- php弹出对话框实现重定向代码
- 点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
- PHP使用range协议实现输出文件断点续传代码实例