溢出文本省略号

已于 2023-05-05 11:01:52 修改
阅读量62 收藏
点赞数
分类专栏： js基础 文章标签： css html5 css3 Powered by 金山文档
于 2023-03-14 16:28:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/I_Do_Well/article/details/129531598
版权
该文章介绍了如何使用CSS来处理文本溢出的问题，对于单行文本，可以通过white-space、overflow和text-overflow属性实现省略号效果；而对于多行文本，利用-webkit-line-clamp属性可以限制显示的行数并配合其他样式达到省略号的效果。
摘要由CSDN通过智能技术生成

一、单行溢出文本省略号

注：代码不能颠倒顺序！！

white-space:nowrop;//溢出不换行
overflow:hidden;//超出隐藏
text-overflow:ellipsis;//文本超出显示省略号

二、多行溢出省略号

overflow: hidden;//超出隐藏
-webkit-box-orient: vertical;//设置旧版弹性盒子排列方式
-webkit-line-clamp: 2;//设置文本行数

小白白白丿
关注
专栏目录
如何实现溢出文本省略号
聚享小站
02-24 325
背景 有时候为了页面美观，对于比较长的标题或简介内容，会希望溢出的内容用省略号代替。这么做虽然降低了用户体验，但是视觉上会比较整洁。 方案 单行文本溢出省略 <p class="txt">这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介</p> <style> .txt { white-space: nowrap; overflow: hidden; text-
使用text-overflow:ellipsis实现溢出文本省略号显示无需js
09-25
总的来说，利用CSS的 `text-overflow: ellipsis` 以及相关的 `white-space` 和 `overflow` 属性，我们可以轻松地在不使用JavaScript的情况下实现文本溢出时的省略号显示，提高网页的性能和用户体验。同时，对于多行...
CSS实现文本溢出省略号或完整显示
码农研究僧的博客
09-19 1688
文本内容超出容器宽度的问题，为了保持页面布局的整洁，通常会使用省略号来隐藏多余的内容 一共有两种方式： 设定省略号 完整展示
CSS，文本溢出显示省略号
沧海龙腾LV的博客
07-05 1万+
css文本溢出显示省略号
css溢出文本省略号
mkbird的博客
07-21 101
溢出文本省略号 单行文本省略 需要满足三个条件 强制一行内显示文本 white-space:nowrap; 溢出部分隐藏 overflow:hidden; 文字用省略号代替超出部分 text-overflow:ellipsis; 多行文本溢出省略号 有较大兼容性问题（适用于webkit内核浏览器） overflow:hidden; text-overflow:ellipsis; /*弹性伸缩盒子模型*/ display:-webkit-box; /*限制在一个块元素显示文本的行数*/ -w
溢出文本省略号表示-无法正常显示
weixin_52500860的博客
09-13 261
溢出文本省略号表示-发现的奇怪事情 html代码 <!-- 单行文本 --> <div class="box1"> 啥也别说，此处省略一万字 </div> <!-- 多行文本 --> <div class="box2"> 啥也别说，此处省略一万字， 啥也别说，此处省略一万字 </div> 1.单行文本 css代码 .box1 { w
文本溢出显示省略号
dimash1996的博客
12-26 1万+
1、单行文本溢出显示省略号 overflow: hidden;（文字长度超出限定宽度，则隐藏超出的内容） white-space: nowrap;（设置文字在一行显示，不能换行） text-overflow: ellipsis;（规定当文本溢出时，显示省略符号来代表被修剪的文本） 2、多行文本溢出显示省略号 -webkit-line-clamp: 2;（用来限制在一个块元素显示的文本的行数，2 表示最多显示 2 行。为了实现该效果，它需要组合其他的 WebKit 属性） display: -we.
css文本溢出显示省略号
热门推荐
weixin_55472979的博客
08-19 3万+
css文本溢出显示省略号
微信小程序之文本单行/多行溢出文本省略号代替
lyj961222的博客
01-04 1380
在微信小程序中的详情介绍中，一般会用到该功能，刚开始，我给文本加了高, .earing_info{ width:96%; height:20%; margin-top:30rpx; margin-left: 2%; display: -webkit-box; font-size:28rpx; color:#000000; line-height: 40rpx; ...
多行文本溢出显示省略号
qq_43687594的博客
03-15 1万+
文本溢出显示省略号分两种情况，单行文本溢出显示省略号（参考上篇文章https://blog.csdn.net/qq_43687594/article/details/123511873），另外一种就是多行文本溢出显示省略号。 多行文本显示省略号有两种办法 第一种： 使用定位伪元素遮盖末尾文字 步骤： 给父元素设置: overflow: hidden;/* 溢出隐藏 */ line-height: 20px;/* 设置行高与容器高度成倍数关系，这样避免文本溢出时，文字显示一半 */
css实现文本溢出显示省略号
09-25
本知识点介绍如何使用CSS实现文本溢出显示省略号的效果。这种方法不仅能够保持页面的整洁性，还可以避免因文本溢出而造成用户界面的混乱。在CSS中，我们可以通过组合几个属性来实现这一效果，包括`white-space`、`...
css 超出用省略号当标题字符溢出用省略号表示
09-25
`一起使用，可以实现溢出文本被裁切并显示省略号。 示例代码如下： ```css div { width: 300px; height: 22px; line-height: 22px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } ``` ...
【前端基础】CSS进阶
qq_41413652的博客
11-01 899
目标：掌握复合选择器作用和写法；使用background属性添加背景效果。
前端学习Day10 CSS盒子属性（附练习版）
As977_的博客
11-02 493
medium 为默认宽度，thin 为小于默认宽度，thick 为大于默认宽度。⚠️：要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为absolute。在web页面中，“盒子”的结构包括厚度、边距、填充等元素，引申到CSS中，就是border、margin和padding。对于任何盒子，都可以分别设定4条边的padding、border和maegin，实现各种各样的排版效果。length 由浮点数字和单位标识符组成的长度值，不允许负值。
第八章 利用CSS制作导航菜单课后习题
2302_80786141的博客
11-01 781
【代码】第八章 利用CSS制作导航菜单课后习题。
CSS例子: 横向排列的格子
11-01 382
【代码】CSS例子: 横向排列的格子。
CSS弹性布局：灵活布局的终极指南
最新发布
weixin_44520557的博客
11-06 1186
在网页设计中，CSS 弹性布局（Flexbox）是一个不可或缺的工具。它能帮助你轻松地排列和对齐元素，尤其是在响应式设计中表现出色。今天，我们就来深入探讨一下 Flexbox 的各个属性，让你彻底掌握这个强大的布局工具。
第8章利用CSS制作导航菜单(第八次作业)
H2629896520的博客
11-01 663
【代码】第8章利用CSS制作导航菜单(第八次作业)
CSS【二】与盒子模型
2302_79986066的博客
11-02 714
div id="div文件01" class="div文件01" style="background-color: darkblue;border:10px solid[线形] 颜色默认情况下与字体颜色保持一致。4 外边框【margin】:看不见摸不着的空气墙[元素与元素之间的距离]选择符1 + 空格 + 选择符2[包含关系]【双标签：标签体可以撑起元素的高度或宽度】2 颜色[color]/*后代选择器 复杂选择器: 缩小范围。padding-top:上。2 内边框【padding】/*内边框 上*/
css 文本溢出显示省略号
08-31
配合 `text-overflow` 使用，可以使文本溢出显示成省略号。 结合两者使用： ```css .text-truncate { display: -webkit-box; overflow: hidden; /* 隐藏超出部分 */ -webkit-line-clamp: 3; /* 只显示三行 */ -...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值