css3如何实现文本显示指定内容,隐藏剩余内容。下面编程教程网小编给大家详细介绍一下具体实现代码!
单行显示内容:
p{
width:240px; /* 设置显示的宽度*/
white-space:nowrap; /* 显示一行,不允许换行 */
overflow: hidden; /* 文字超出隐藏 */
text-overflow: ellipsis;/* 文本溢出显示省略 */
}
多行显示内容:
p{
width:240px; /* 设置显示的宽度*/
overflow: hidden; /* 文字超出隐藏 */
text-overflow: ellipsis;/* 文本溢出显示省略 */
display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
-webkit-line-clamp: 3; /* 最多显示几行 */
-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
}
以上是编程学习网小编为您介绍的“css3如何实现文本显示指定内容(隐藏剩余内容)”的全面内容,想了解更多关于 前端知识 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:css3如何实现文本显示指定内容(隐藏剩余内容)


基础教程推荐
猜你喜欢
- offsetTop用法详解 2022-11-20
- ajax post下载flask文件流以及中文文件名问题 2023-02-23
- Ajax 上传图片并预览的简单实现 2023-01-21
- VueX 学习笔记 2023-10-08
- JavaScript使用HTML5的window.postMessage实现跨域通信例子 2024-02-06
- HTML 2023-10-28
- input file样式修改以及图片预览删除功能详细概括(推荐) 2024-02-09
- Js判断CSS文件加载完毕的具体实现 2024-02-09
- nginx index.html在修改后不会更新 2023-10-29
- BootStrap栅格系统、表单样式与按钮样式源码解析 2024-01-19