CSS 长文本处理----文本一行和多行超出,省略号显示

CSS 文本显示处理

默认:字符太长溢出了容器

<style media="screen"> #div { width: 200px; border: 1px solid red; } </style> <div id="div"> Most words art short & don't need to break.But Antidisestablishmentarianism is to long. </div>
效果图

字符超出部分换行

<style media="screen"> #div { width: 200px; border: 1px solid red; overflow-wrap: break-word; } </style> <div id="div"> Most words art short & don't need to break.But Antidisestablishmentarianism is to long. </div>
效果图

字符超出位置使用连字符

<style media="screen"> #div { width: 200px; border: 1px solid red; overflow-wrap: break-word; hyphens: auto; } </style> <div id="div" lang="en"> Most words art short & don't need to break.But Antidisestablishmentarianism is to long. </div>
效果图

单行文本超出省略

<style media="screen"> #div { width: 200px; border: 1px solid red; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> <div id="div"> Most words art short & don't need to break.But Antidisestablishmentarianism is to long. </div>
效果图

多行文本超出省略

<style media="screen"> #div { width: 200px; border: 1px solid red; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } </style> <div id="div"> Most words art short & don't need to break.But Antidisestablishmentarianism is to long. </div>
效果图

注:日常整理,仅做参考,欢迎评论,虚心接受。

一篇优秀参考文章


__EOF__

本文作者秦士振
本文链接https://www.cnblogs.com/qinshizhen/p/14601127.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   秦士振  阅读(193)  评论(0编辑  收藏  举报
编辑推荐:
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
阅读排行:
· 为DeepSeek添加本地知识库
· 精选4款基于.NET开源、功能强大的通讯调试工具
· DeepSeek智能编程
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
点击右上角即可分享
微信分享提示