CSS--文本溢出显示省略号

最新推荐文章于 2024-08-03 20:42:48 发布
最新推荐文章于 2024-08-03 20:42:48 发布
阅读量263 收藏 1
点赞数
分类专栏： CSS 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52283867/article/details/117216049
版权
前言

首先这里分为单行文本溢出和多行文本溢出，关键是看你在什么情况下使用！！

代码与实现
单行文本

实现我们创建一个ul，里面放几个li，设置好宽度然后在放入文字

<ul>
        <li>
            <span>我好想睡觉啊啊啊啊啊啊啊啊啊啊啊啊</span>
        </li>
        
    </ul>

样式

ul{
   
            width
最低0.47元/天 解锁文章
玩会手机就睡觉
关注
专栏目录
多行文本溢出显示省略号…
weixin_30586257的博客
04-15 81
》单行文本的溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性。 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 》多行文本溢出显示省略号 WebKit浏览器或移动端的页面 在WebKit浏览器或移动端（绝大部分是WebKi...
如何让溢出的文字省略号显示
kidding_z的博客
07-27 1118
如何让溢出的文字省略号显示 一、单行文本溢出显示省略号 1、单行文本溢出显示省略号–必须满足的三个条件。 <1>:先强制一行内显示文本。 <2>.超出的部分隐藏 <3>文字用省略号替代超出的部分 .box{ width: 150px; height: 100px; background-color: pink; font-size: 18px; co
【小技巧】CSS如何实现文字溢出显示省略号
qq_65034569的博客
08-03 481
是一种常见的文本截断技术，用于在文本内容超出其容器宽度时，提供一种视觉上的提示，表明文本已被截断。在列表项或者导航菜单中，经常会在列表项或导航菜单中，由于空间有限，当文本内容较长时，可以使用省略号显示文本已被截断。这个方法很多地方都会用到，我们可以直接复制下来，写在一个公共样式当中，下次直接使用类名即可(当然，文字省略了之后，也要得找个时机让他的文字完全显示的做法，只需要设置一个。方法非常简单，只需要添加以下👇三句话就可以实现啦🥳！伪类，让鼠标经过的时候显示全。设置不允许换行，强制文字一行显示。
多行文本溢出显示省略号
xiaozhen0610的博客
08-24 80
overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
移动端的text-overflow多行文本溢出显示省略号(…)
12-10
在网页设计中，文本溢出显示省略号是一种常见的需求，尤其在移动端界面，有限的屏幕空间要求我们优雅地处理过长的文本内容。在移动端，`text-overflow: ellipsis` 属性常用于单行文本溢出时显示省略号，但其本身并不...
css实现文本溢出显示省略号
09-25
本知识点介绍如何使用CSS实现文本溢出显示省略号的效果。这种方法不仅能够保持页面的整洁性，还可以避免因文本溢出而造成用户界面的混乱。在CSS中，我们可以通过组合几个属性来实现这一效果，包括`white-space`、`...
CSS省略号text-overflow超出溢出显示省略号
12-04
该属性允许我们在文本溢出容器边界时，用省略号（…）来代替被裁剪的文本，从而提供一种优雅的显示效果。 标题和描述中提到的“CSS省略号text-overflow超出溢出显示省略号”是指在CSS样式中利用`text-overflow: ...
多行文本溢出显示省略号(…)
SailingCoder的博客
07-05 6565
多行展示以省略号(…)处理 在开发过程中会出现大量文字展示情况，一般都会做超过几行，剩余部分按照省略号展示。 单行展示 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行展示 WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）方可使用，有很大的兼容问题 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line
多行文本溢出显示省略号...
kongjiea笔记
10-14 2904
定位元素实现多行文本截断 p { position: relative; line-height: 18px; height: 36px; overflow: hidden; } p::after { content:"..."; font-weight:bold; position:absolute; bottom:0; ...
CSS中关于文本溢出部分用省略号显示
小小前端
07-12 333
在日常排版中我们经常会为了不影响排版布局而将溢出容器的文本用省略号代替。 单行文本处理 单行处理比较简单，只需要加入三个css属性就行。 html <p>这是一行貌似很长很长的测试文本</p> css p{color: #666;width: 100px;background: #ff0;} /*容器必须有明确的宽度*/ p{ overflow: hidden; ...
CSS溢出文字使用省略号表示
kettlo的博客
04-01 3916
溢出文字省略号显示 1.单行文本溢出显示省略号： 需要给元素设置固定宽度，如果是行内元素需要先转换为行内块元素或块元素 display: inline-block; <body> <p> 由衷敬意，难以言表。此处省略一万字。 </p> </body> p { display: inline-block; width: 200px; /* 1.先强制一行内显示文本 */ white-space
实现多行文本溢出显示省略号
AlexMeow的博客
10-07 315
常见结合属性： display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。 overflow : hid
CSS溢出的文字省略号显示
岁月的博客
08-30 776
目录1.单行文本溢出显示省略号--必须满足三个条件2.多行文本溢出显示省略号 1.单行文本溢出显示省略号–必须满足三个条件 /* 1.先强制一行内显示文本 */ white-space: nowrap;（默认normal自动换行） /* 2.超出的部分隐藏 */ overflow: hidden; /* 3.文字用省略号替代超出的部分 */ text-overflow: ellipsis; 代码： <!DOCTYPE html> <html> &lt
CSS实现多行文本溢出显示省略号
kongjunchao159的博客
10-17 738
单行文本溢出显示省略号，可以直接使用 text-overflow:ellipsis; white-space:nowrap; *{margin: 0; padding: 0;} div{width: 200px; height: 40px; line-height: 20px; border: 1px solid red; margin-top: 100px; mar
css 文本溢出显示省略号
最新发布
08-31
CSS 中文本溢出显示省略号的功能通常通过 `text-overflow` 和 `overflow` 属性配合使用来实现。当你设置元素的内容超出其容器时，可以控制如何处理溢出的部分。 1. `text-overflow` 属性：用于指定当文本溢出元素内容区域时的行为。常见的值有 `ellipsis`（显示省略号），`clip`（截断超出部分），以及 `hidden`（隐藏溢出内容）。 例子： ```css .text-truncate { white-space: nowrap; /* 防止换行 */ overflow: hidden; /* 如果内容溢出，隐藏多余的 */ text-overflow: ellipsis; /* 显示省略号 ... */ } ``` 2. `overflow` 属性：它定义了当内容超过容器尺寸时，多余部分是否可见。配合 `text-overflow` 使用，可以使文本溢出显示成省略号。 结合两者使用： ```css .text-truncate { display: -webkit-box; overflow: hidden; /* 隐藏超出部分 */ -webkit-line-clamp: 3; /* 只显示三行 */ -webkit-box-orient: vertical; /* 设置为垂直方向的多行盒模型 */ text-overflow: ellipsis; /* 当超出时显示省略号 */ } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值