CSS3:text-overflow实现文字截取,超出部分显示省略号
1. 概述
使用text-overflow:ellipsis对溢出文本显示省略号有两个好处,
- 一是不用通过后端程序截取;
- 二是有利于SEO。
2. text-overflow的属性
clip: 当对象内文本溢出时不显示省略标记(…),而是将溢出的部分裁切掉。 如下图: p ellipsis: 当对象内文本溢出时显示省略标记(…),如下图:
string:使用给定的字符串来代表被修剪的文本,目前绝大部分浏览器不支持
3. 完整示例
<style type="text/css"> p { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%; } </style> <p>床前明月光,疑是地上霜。举头望明月,低头思故乡。</p>
如下图:
- white-space:nowrap; 规定段落中的文本不进行换行,否则溢出的文本就到了下一行了。
- overflow:hidden; 隐藏超出范围的文本,否则溢出的文本就正常显示出来了。
- width:100%; 主要针对IE6
4. 兼容性
到目前为止,包括IE6+、Chrome、Firefox等主流浏览器都支持了该功能。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 字符编码:从基础到乱码解决