怎么让多出来的文字变成省略号呢？---css3属性之text-overflow

最新推荐文章于 2022-08-19 11:22:08 发布
最新推荐文章于 2022-08-19 11:22:08 发布
阅读量516 收藏
点赞数 1
分类专栏： 随笔
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44442095/article/details/87691554
版权

有时候文本内容比较多我们又不希望它全部显示，而是变成省略号时，就可以使用text-overflow这个属性。
text-overflow：clip | ellipsis
默认值：clip
适用于：所有元素
clip： 当对象内文本溢出时不显示省略标记（…），而是将溢出的部分裁切掉。
ellipsis： 当对象内文本溢出时显示省略标记（…）。
这里有一件事情要注意，我在使用这个的时候发现只用text-overflow：ellipsis是不起作用的，需要再加上overflow：hidden 和white-space：nowrap(规定段落中的文本不进行换行：) 我查阅其他文章发现有的说还需要加上width：50%,我是没加，如果加上overflow：hidden 和white-space还是不起作用的同学可以试试加上

CSS属性text-overflow的使用问题
11-21
在CSS中，`text-overflow`属性用于处理文本溢出的情况，它允许你定义当文本在有限的容器内无法完全显示时如何展示超出部分。在标题和描述中提到的，`text-overflow`通常需要与`overflow`和`white-space`属性结合使用...
CSS省略号text-overflow超出溢出显示省略号
09-25
DIV CSS text-overflow文本有溢出时显示css省略号clip ellipsis样式基础知识与用法实例经验教程
CSS控制文字只显示几行，超出一部分显示省略号
eileen823的博客
02-26 5940
.text1 { width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; -webkit-text-overflow:ellipsis; -moz-text-overflow:ellipsis; white-space:nowrap; } .text2 { width:200p
使用CSS让多出来的字变为省略号
weixin_30770783的博客
07-15 90
<style> .text1 { width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; -webkit-text-overflow:ellipsis; -moz-text-overflow:ellipsis; white-space:n...
CSS设置多余的文本显示省略号
Alfred的博客
05-03 475
在web开发过程中，常常会遇到要让布局中的某些文本根据宽度来显示，如果超过最大宽度仍然显示不完的，就显示为省略号的情况，添加下面的CSS样式表就能实现这种效果，但是这种效果只适用于单行显示的文本。方法/步骤1首先给用于放文本的标签元素设置一个宽度值，并设置溢出属性overflow为溢出隐藏,设置文本缩略的样式为"..." width: 245px;overflow: hidden;white-s
如何让多出的文本用省略号表示
LM18826013676的博客
05-12 93
<div class="bigg"> <nobr><img src="images/you.png">2017夏季学生韩版显瘦百搭卡通刺绣半袖圆领上衣女</nobr> </div> .bigg{width: 230px;overflow:hidden;text-overflow:ellipsis} ...
css文本溢出显示省略号
weixin_55472979的博客
08-19 3万+
css文本溢出显示省略号
让多出来的文字变成省略号呢？---css3属性之text-overflow
军0000的博客
01-08 219
有时候文本内容比较多我们又不希望它全部显示，而是变成省略号时，就可以使用text-overflow这个属性。 text-overflow：clip | ellipsis 默认值：clip 适用于：所有元素 clip： 当对象内文本溢出时不显示省略标记（…），而是将溢出的部分裁切掉。 ellipsis： 当对象内文本溢出时显示省略标记（…）。这里有一件事情要注意，我在使用这个的时候发现只用text-overflow：ellipsis是不起作用的，需要再加上overflow：hidden 和white-spac
使用text-overflow:ellipsis实现文字超出用省略号显示
09-25
例如，通过JavaScript可以获取到容器的实际宽度和内部文本的实际长度，从而在文本末尾手动插入省略号，而不必依赖于CSS的 `text-overflow` 属性。 对于文章开头提到的“感兴趣的朋友可以参考下”的示例，可能是指在...
css字体溢出省略号处理(3种)
qq_36711388的博客
10-06 2万+
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。 实现方法： span{ overflow: hiddden; text-overflow: ellipsis; white-space: nowrap; } 效果如图： 但是这个属性只支持单...
css 实现文字一行显示，多出部分显示省略号
小鱼儿~同学
02-20 2230
文字一行显示，多出部分显示成省略号 html结构 <div class="title">前端开发工程师</div> 对应的css样式为 .title{ width: 50px; color: skyblue; white-space: nowrap; overflow: hidden; text-overflow: ellip...
css省略号方法及不显示问题修复
qq_40034690的博客
09-11 3044
文本溢出省略号方法及三段式无作用问题1、单行文本溢出（三段式）2、多行文本溢出显示省略号3、多行文本溢出省略号不显示的解决方法4、参考链接 1、单行文本溢出（三段式） 写完三段式记得写个宽度 overflow: hidden;//溢出隐藏 text-overflow:ellipsis;//溢出部分显示为省略号 white-space: nowrap;//不换行 2、多行文本溢出显示省略号 di...
CSS实现内容超出时用省略号表示
LaoYe的博客
08-13 9259
除了利用JS实现将超出的字数隐藏外，还可以利用CSS帮我们来实现。 我们可以使用三个属性来实现，分别是： ①、overflow：hide overflow 属性规定当容器内的文本内容溢出时，容器所发生的事情。hide值指明了溢出的内容会被修剪。 ②、text-overflow:ellipsis text-overflo...
css样式：文字多变省略号
ScumStudy的博客
11-14 1698
一下三行代码： //以下三行代码是文字太多变三行 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
css中text-overflow属性与文本截断详解
09-27
在CSS中，`text-overflow`属性是用来处理文本溢出情况的一个重要工具，尤其是当文本在有限的容器内无法完全显示时。这个属性通常与`overflow`和`white-space`属性一起使用，来实现文本的截断和省略。本文将深入探讨`...
CSS基础：text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
云烟阁
12-22 4万+
语法：  　　text-overflow : clip | ellipsis  　　参数：  　　clip : 　不显示省略标记（...），而是简单的裁切 　　（clip这个参数是不常用的！） 　　ellipsis : 　当对象内文本溢出时显示省略标记（...） 　　说明：  　　设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。 　　请您注重，text-ove
html文字超过部分显示为省略号
热门推荐
lwf的博客
04-08 13万+
为了保证页面的整洁美观，在很多的时候，我们常需要隐藏超出长度的文字。这在列表条目，题目，名称等地方常用到。(1).文字超出一行，省略超出部分，显示’…’ 如果这种情况比较多，可以取一个切合作用的类名用于复用。.line-limit-length { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //文本不换行，这样超
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值