css设置显示几行多余显示省略号-样式不生效的解决方式

最新推荐文章于 2023-12-22 13:01:06 发布
最新推荐文章于 2023-12-22 13:01:06 发布
阅读量3k 收藏 1
点赞数
分类专栏： 前端样式开发- css/ sass/less 文章标签： css html reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43405717/article/details/111352296
版权
这篇博客介绍了如何使用CSS解决显示一行或多行文本超出后显示省略号的问题，内容涵盖了个人在学习过程中的笔记，旨在分享技术心得。如果存在侵权等问题，作者承诺会及时处理。
摘要由CSDN通过智能技术生成

显示一行，超出显示省略号

　　overflow: hidden;
　　text-overflow:ellipsis;
　　white-space: nowrap;

显示多行，超出显示省略号

	word-break: break-all;
　　text-overflow: ellipsis;
　　display:
最低0.47元/天 解锁文章
Domi 的笔记
关注
专栏目录
React多行文本溢出显示省略号...和箭头(纯CSS)
printf_what的博客
05-07 1341
纯CSS实现多行文本超出显示...以及展开和收起
css不换行省略号 没作用,flex布局下，css设置文本不换行时，省略号不显示的解决办法...
weixin_39779739的博客
08-04 1122
大致是有一个 main 容器是 flex 布局，左边一个 logo 固定宽高，右边 content 动态宽度。 a namea infoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut en...
解决react 多行文本显示省略号不生效问题
weixin_43777074的博客
07-02 1329
在普通的前端css中，如果要是文本超出一行就显示省略号，一般在css中写： .box { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; } 要想多行文本显示省略号（这里不考虑兼容情况），一般这样写： .box { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -w
css超过两行显示省略号，项目中有不生效的是被编译的问题导致
JJWanna的博客
09-11 831
Css超过两行现实省略号 width:250px; height:44px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; // 作为弹性伸缩盒子模型显示。 /* autoprefixer: off */ // 这行必须加的，这个就是控制代码被编译不生效的问题的 上off 下on -webkit-box-orient: vertical;
html文字两行显示其余隐藏,css 文本超出2行就隐藏并且显示省略号，并解决在less中不生效的问题...
weixin_29846499的博客
06-03 1407
首先，要知道css的三条属性。overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行这三个是css的基础属性，需要记得。但是第三条属性，只能显示一行，不能用在这里，那么如何显示多行呢？css3解决了这个问题，解决方法如下：display:-webkit-box; //将对象作为弹...
文字和图标并排展示，最多两行，超出范围省略号显示后跟小图标
最新发布
qq_42396813的博客
12-22 1542
文字后跟小图标，文字超出范围显示省略号
React学习(十)-React中编写样式CSS(styled-components)
itclanCoder
10-19 3790
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文| 川川VX-ID:suibichuanji点击文末左下方阅读原文,可看更多内容前言React是一个构建用户界面的js库,从UI=render()这个等式中就很好的映射了这一点,UI的显示取决于等式右边的render函数的返回值.而编写React应用,就是在...
CSS3基础知识个人总结
ZeroTwoZRX的博客
04-18 624
权重，选择器，边框，边框圆角，背景，浮动，盒子模型，文本溢出，伪类，定位，表格，自适应，元素隐藏，满屏布局，阴影，渐变，浏览器前缀，过渡，动画，transition，transform，animation。
HTML5、CSS、JS基础
qq_49101841的博客
03-03 2371
学习笔记
react多行文字超出省略号失败解决办法
一枚不断学习的小码农一枚~
09-17 586
在react less文件中直接使用以下css属性失效 // 单行文字加省略号 overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' // 两行文字加定高 overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', -webkit-line-clamp: 2, -webkit-box-orient: 'verti
React文本溢出显示省略号失效
jay1587的博客
07-02 182
React文本溢出显示省略号失效 多行文本添加一段注释语句 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; /* autoprefixer: ignore next */ -webkit-box-orient: vertical; word-wrap: break-word; ...
vue框架多行省略失效的问题
weixin_57649833的博客
12-27 324
样式多行省略失效
两行或三行（多行）文本溢出显示...不生效
Beamon__的博客
09-18 1万+
就在刚刚需要在react项目写一个限制文本长度两行，溢出显示省略号的场景，但是没有生效，经过查阅，得到以下解决方法，供参考～   初次写法： .item-title{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; ...
css文本超出隐藏显示省略号 以及多行文本省略号失效的问题
bamboozjy的博客
07-27 7138
单行文本： .box{ width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 多行文本： .box{ width: 300px; overflow: hidden; text-overflow: ellipsis; display: -webk...
ionic框架导致多行省略号第一次显示不起作用
hua_ban_yu的博客
11-05 353
在使用ionic框架开发项目遇到一个坑，使用多行显示省略号第一次页面加载无效，然后进行页面跳转获取修改一个css样式，这时候多行显示省略号才会有效果。 原因: 使用ionic提供<ion-avatar>加载图片导致。 重现步骤： 1. 没有修改前页面初始化显示列表数据，发现多行显示省略号效果不对 2. 随便修改一个参数后发现多行显示省略号就生效了 修改方法： 1...
css多行文本超出显示省略号无效解决方法
supming1的专栏
12-29 7172
css多行文本超出显示省略号，以2行为例，网上很多解决方法，如下。之前一直采用的是这种方法，最近发现无效了。vant也是这种写法， .txt-ellipsis-2 { display:-webkit-box; overflow: hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; text-overflow: ellipsis; word-break: break-all; } 排查后发现
input输入框字数超出长度显示省略号...
热门推荐
sally18的博客
07-25 1万+
<!DOCTYPE html> <html> <head> <title>长度超过限制</title> </head> <body> <input type="" name="" style="overflow:hidden; white-space:nowrap; text-overflow:...
悬浮显示input中所有的内容及css处理文字过长时显示为多余部分省略
weixin_34109408的博客
02-28 3563
2019独角兽企业重金招聘Python工程师标准>>> ...
听说你定义了text-overflow: ellipsis 没生效?
m0_37922914的博客
05-24 4531
朋友们有没有试过这种情况？ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 一口气三连后没看到有省略号出现？然后开始胡乱该碰运气期待能生效？现在将会给出准确无疑得解决方法，走起 我们首先要知道： text-overflow:ellipsis;这个属性，只会在以下条件均成立时才生效： 包裹文字的容器一定要有确定的宽度，有确定单位宽度，如100px, 而要注意的是百分比单位（%）无效，很多人都是因为给容器定了百分比宽度而导致te
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值