css多行文本省略号(...)
2024-10-21 05:01:51
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。
实现单行文本省略
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style>
div {
margin:0 auto ;
width:300px;
color: red;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head> <body>
<div>单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略</div>
</body> </html>
结果
实现多行文本省略
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style>
div {
margin: 0 auto;
width: 300px;
color: red;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:;
overflow: hidden;
}
</style>
</head> <body>
<div>多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略</div>
</body> </html>
结果
注意:CSS3属性记得添加前缀,如
-webkit-box-orient
最新文章
- Qt qml pageview 左右滑动分页组件
- 总结JS 常用函数
- Linux下vim查看文件名
- codeforces 711D Directed Roads(DFS)
- Entity Framework Core 实现读写分离
- cookie和session区别
- AJAX的工作原理及其优缺点
- 剑指offer--面试题14
- 转载ECTouch1.0 修改后台广告管理中广告列表显示广告图片
- 利用xcode生成的app生成可以在iphone和itouch上运行的ipa安装包
- Spring Boot 2.0(六):使用 Docker 部署 Spring Boot 开源软件云收藏
- 用Laravel Sms实现 laravel短信验证码的发送
- Java学习笔记 -- Java定时调度工具Timer类
- j2EE基础知识
- Month format:number to English abbre
- 上传本地文件到github
- mongodb副本集搭建
- MySQL基础--字符函数
- 内核同步机制-RCU同步机制
- 一个基于JRTPLIB的轻量级RTSP客户端(myRTSPClient)——实现篇:(六)RTP音视频传输解析层之音视频数据传输格式
热门文章
- 2016级算法期末上机-H.难题&#183;AlvinZH&#39;s Fight with DDLs III
- 4、2支持向量机SVM算法实践
- js时间转变
- Mac下快速新建txt文件
- (转)基于OpenStack构建企业私有云(1)实验环境准备
- java常量类的实现方式_枚举类_项目实践
- fgets()函数读取键盘,去掉换行符或丢弃多余的字符
- No result defined for action and result input
- JAVA练手--String
- c# Dictionary 中Keys.ToArray<;>;方法的细节测试