文字溢出之CSS

最新推荐文章于 2025-12-19 15:33:32 发布
原创 最新推荐文章于 2025-12-19 15:33:32 发布 · 733 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#class #html #css

ddddddkkkkkkkkkkkkkkdddd

 

文字溢出

【小技巧】CSS如何实现文字溢出显示省略号
qq_65034569的博客
08-03 2173
是一种常见的文本截断技术，用于在文本内容超出其容器宽度时，提供一种视觉上的提示，表明文本已被截断。在列表项或者导航菜单中，经常会在列表项或导航菜单中，由于空间有限，当文本内容较长时，可以使用省略号显示文本已被截断。这个方法很多地方都会用到，我们可以直接复制下来，写在一个公共样式当中，下次直接使用类名即可(当然，文字省略了之后，也要得找个时机让他的文字完全显示的做法，只需要设置一个。方法非常简单，只需要添加以下👇三句话就可以实现啦🥳！伪类，让鼠标经过的时候显示全。设置不允许换行，强制文字一行显示。
CSS 溢出内容处理：从基础到实战
engchina的专栏
01-31 1917
CSS 溢出内容处理：从基础到实战
【css】文字溢出
weixin_42357865的博客
03-28 184
【代码】【css】文字溢出。
Css文字溢出隐藏
weixin_45125941的博客
06-26 477
多行：这个多行用了-webkit-的一些特性，其他浏览器不清楚兼容不兼容。
Css文字溢出
qq_35353972的博客
11-29 459
Css文字溢出
CSS文字溢出隐藏
gcyaozuodashen的博客
08-24 2403
CSS文字溢出隐藏
CSS之文字溢出隐藏
不再闪亮的星星的博客
09-16 4093
单行文字溢出隐藏 多行文字溢出隐藏
css将溢出的文字隐藏
qq_64959227的博客
05-20 487
超出省略号显示：text-overflow: ellipsis;文本同一行显示：white-space: nowrap;超出隐藏：overflow: hidden;（如果还是没有隐藏，就给父级设置固定宽度）
css 文字溢出问题
weixin_43453621的博客
10-16 530
默认方式 - 简单裁切 : 不显示 ... 省略号;显示省略号 : 文本溢出时 , 显示 ... 内容;显示一行 : 强行将盒子中的文本显示在一行中;默认方式 : 显示多行;
css溢出省略文字
weixin_70426591的博客
11-17 206
css多行文字省略
CSS实现文本溢出处理
qq_51667621的博客
07-25 1022
/margin;padding;box-sizing;margin;padding;/* 两端对齐 */text-align;;border;/* --------- 单行文本溢出处理 ----------- *//* 不换行 */;/* 隐藏超出部分 */overflow;/* 未显示部分用省略号代替 */;
css overflow溢出隐藏(文字溢出时的自动隐藏处理)
12-13
版本：CSS2　兼容性：IE4+ NS6+　继承性：无语法：overflow : visible | auto | hidden | scroll 相关参数说明如下： visible:：不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window...
【前端知识之CSS】文本溢出
weixin_44337386的博客
05-17 515
本系列主要整理前端面试中需要掌握的知识点。本节介绍单行和多行文本溢出的处理方式。
前端原生能力速查笔记（HTML + 浏览器 API 实战篇）
奋斗的小前端
12-16 127
本文总结了前端开发中无需框架即可实现的高频实用功能：1）a标签下载文件的核心原理与注意事项；2）前端打印功能的基础实现与进阶优化；3）HTML原生实用属性；4）浏览器内置JavaScript API（剪贴板、全屏、本地存储等）。这些原生功能可提升开发效率，建议作为日常开发速查和基础能力沉淀。
Html中常用的块标签!!!12.16日
2501_90845920的博客
12-16 974
用dl创建列表，dt表示下定义（小标题），dd表示对定义内容补充默认样式：dl上下有16像素的外边距dd左侧有40像素的外边距1、给列表增加type属性，可以修改项目符号（了解一下），但一般我们不用列表的默认的项目符号ol type属性值 可选：1(默认值)，A,a,I,i下图所示为有序列表中默认项目符号改为Aul type属性值 可选：disc，默认值，实心的圆点square，实心的方块circle，空心的圆下图所示为无序列表中默认项目符号改为空心的圆。
使用Java将HTML内容转换为Word文档
最新发布
liuhm的博客
12-19 951
通过上述方法，我们可以快速实现HTML到Word的转换功能。虽然方案相对简单，但在许多实际项目中都能发挥重要作用。对于更复杂的需求，可以考虑集成专业的文档处理库如Flying Saucer或Docx4j。希望这个小技巧能帮助到正在做类似功能的开发者朋友们！博客地址代码下载下面的markdown-to-word。
常用块标签和三种列表
2511_94359082的博客
12-16 1053
用dl创建列表，dt表示下定义（小标题），dd表示对定义内容补充默认样式：dl上下有16像素的外边距 dd左侧有40像素的外边距。
HTML中的表单
2301_77453930的博客
12-15 451
很多情况下我们需要在网页中实现输入功能，（如用户名、电话、邮箱等），就需要用到HTML表单。HTML表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到服务器端表单中包含了输入框复选框单选按钮提交按钮等不同的表单控件，用户通过修改表单中的元素来完成表单，再通过提交按钮将表单数据提交给后端在HTML中，表单使用标签来定义和表单域 ： < form method="提交的方式" action="表单提交的路径">
HTML常用行内标签
2511_94359082的博客
12-17 749
例如：百度的网址，无论在哪个文件，地址永远是https://www.baidu.com。语义：em和strong标签都有强调的语义，em是语气语调的强调，strong是内容的强调。b标签和strong标签都有加粗的默认样式，b标签没有语义，strong标签有强调的语义，i标签和em标签都有斜体的默认样式，i标签没有语义，em标签有强调的语义，你要跳转的文件跟超链接所在的文件在不同一个目录下，../跳出当前的文件夹，em是斜体强调，强调语音语调，strong是加粗强调，强调内容的重要性。
css 文字溢出
08-24
在 CSS 中，当文字内容超出容器宽度或高度时，我们可以通过一些 CSS 属性来控制文字的显示方式，比如隐藏、截断、添加省略号等。以下是常见的文字溢出处理方式。 --- ## ✅ 1. 单行文字溢出显示省略号（`...`） 适用于单行文本超出容器宽度时显示省略号。 ```css .ellipsis { white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 隐藏溢出内容 */ text-overflow: ellipsis; /* 添加省略号 */ } ``` ```html <div class="ellipsis" style="width: 200px;"> 这是一段很长的文字，超出容器宽度后将显示省略号... </div> ``` --- ## ✅ 2. 多行文字溢出显示省略号（CSS 多行截断） 适用于限制显示行数，超出部分显示省略号。 ```css .multi-line-ellipsis { display: -webkit-box; /* 旧版弹性盒子模型 */ -webkit-box-orient: vertical; /* 内容垂直排列 */ -webkit-line-clamp: 3; /* 限制显示行数 */ overflow: hidden; /* 隐藏溢出内容 */ text-overflow: ellipsis; /* 添加省略号（仅最后一行） */ } ``` ```html <div class="multi-line-ellipsis" style="width: 200px;"> 这是一段很长的文字，超出容器宽度后将显示省略号... 这是一段很长的文字，超出容器宽度后将显示省略号... </div> ``` > ⚠️ 注意：`-webkit-line-clamp` 是 WebKit 浏览器专用属性，但在现代浏览器中基本都支持。 --- ## ✅ 3. 文字溢出隐藏 直接隐藏超出部分，不显示省略号。 ```css .hide-overflow { overflow: hidden; } ``` ```html <div class="hide-overflow" style="width: 200px;"> 超出容器宽度的内容将被隐藏。 </div> ``` --- ## ✅ 4. 文字自动换行，防止溢出 适用于长单词或 URL 不自动换行的情况。 ```css .word-break { word-wrap: break-word; /* 允许长单词或 URL 换行 */ white-space: normal; /* 允许换行 */ } ``` ```html <div class="word-break" style="width: 200px;"> 这是一个非常非常非常非常非常非常长的单词wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww...... </div> ``` --- ## ✅ 总结 | 效果 | CSS 属性 | |------|----------| | 单行省略 | `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;` | | 多行省略 | `-webkit-line-clamp` + `display: -webkit-box` | | 溢出隐藏 | `overflow: hidden;` | | 自动换行 | `word-wrap: break-word;` | --- ##
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值