【css】文字超出省略号显示

最新推荐文章于 2023-07-27 14:51:57 发布
最新推荐文章于 2023-07-27 14:51:57 发布
阅读量90 收藏
点赞数
分类专栏： css 文章标签： css3 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_37624436/article/details/109580132
版权
本文介绍了一种用于处理网页中超出容器宽度的文本显示方法。通过使用CSS属性如overflow、text-overflow、white-space来实现单行文本溢出时的省略号效果；并通过display、-webkit-box等属性实现多行文本的截断展示。这些技巧对于优化网页布局非常有用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

单行文字

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

多行文字

overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical

 

css实现文本超出显示省略号
风中追风
04-13 972
【代码】css实现文本超出显示省略号。
vue -webkit-box-orient vertical webpack打包后被过滤掉了 线上没有这行代码
qq_2422941992的博客
02-09 303
问题：vue -webkit-box-orient vertical webpack打包后被过滤掉了 线上没有这行代码 解决： （1）方法一：加上绿色注释，跳过webpack的css打包 .word-overflow-3{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; /*! autoprefix...
-webkit-box-clamp失效和-webkit-box-orient:vertical被过滤
baidu_33614459的博客
03-15 1446
在使用-webkit-box-clamp:2一直失效 .content{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow:ellipsis; } 网上也找了解决方法，但是没有用。最后发现控制台少了-webk...
vue -webkit-box-orient: vertical webpack打包后被过滤掉了 线上没有这行代码
weixin_34414196的博客
10-18 164
（1）方法一：加上绿色注释，跳过webpack的css打包 .word-overflow-3{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; /*! autoprefixer: off */ -webkit-box-orient:vertical; /*! autopref...
vue webpack打包 -webkit-box-orient 失效
qq_35149546的博客
08-21 218
1.vue webpack打包 -webkit-box-orient 失效
CSS 多行省略失效 (-webkit-box-orient 失效)
Candy_home的专栏
03-21 1万+
很神奇的使用多行省略的时候原始代码为：.line-ellipsis-2{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; -webkit-box-orient: vertical; } 默认编译的时候，会过滤 -webkit-box-orie...
解决Webpack打包时自动过滤-webkit-box-orient，导致属性不生效
m0_54281583的博客
07-27 462
使用文字超长自动显示省略号。本地运行测试完全没有问题，但是使用WebPack打包后，发布到服务器上，属性失效。debug查看，CSS中-webkit-box-orient:vertical消失了？？？？？？调查了很长时间，网上各种找攻略，都不好使。下面两种亲测根本不好用。编译的时候还是会自动过滤。而且第一种在vscode编译的时候，还会报警告。还有一种方式直接关闭autoprefixer: {remove: false}，不推荐！！！！使用内联样式，完美解决问题！！！！
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
10-20
在本文中，我们将探讨如何使用JavaScript和CSS技术实现当网页中的文本内容超出设定的长度时，自动用省略号(...)来代替超出部分，并且当用户将鼠标悬停在该文本上时，显示完整的文本信息。这通常是在网页设计中用来...
微信小程序实现多行文字超出部分省略号显示功能
10-16
通过这种方式，我们可以有效地在微信小程序中实现多行文字的省略号显示功能。需要注意的是，由于`-webkit-line-clamp`和`-webkit-box`是Webkit内核特有的CSS属性，所以这种方法只适用于基于WebKit的浏览器或平台，如...
CSS超出文本指定宽度用省略号代替和文本不换行
09-24
总结，通过CSS的`text-overflow: ellipsis`、`overflow: hidden`和`white-space: nowrap`属性，我们可以有效地控制文本在指定宽度内的显示，避免文本换行并用省略号表示超出的部分。对于表格和多行文本，可能需要...
CSS文本超出2行就隐藏并且显示省略号
01-19
//溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？ 超出两行隐藏: css3解决了这个问题，解决方法如下： display:-webkit-box; //将对象作为...
display:-webkit-box；在IE浏览器中不兼容问题
ganjingjie的博客
08-31 3980
问题：在IE里面不兼容，右边那部分掉下去了 解决方案： 加一句display: -ms-flexbox;代码就可以兼容IE了（只能兼容到IE10）， display: -webkit-box; （Chrome 4+, Safari 3.1, iOS Safari 3.2+） display: -moz-box; （Firefox 17-） display: -webkit-flex; （Chrome 21+, Saf...
一个被 -webkit-box 坑了的娃
king_jw的专栏
06-29 2122
一个被坑了的样式,这里简单记录下…… 手机web app版的点餐应用(canjs + hammer + Fastclick ) 类似美团外卖,在菜单页面有加减按钮.页面布局大概是 分类下菜单列表可以上下滚动.header和购物车栏都是固定布局分类和分类菜单列表在一个大div中(图中黄色边线标识),因为不能被header挡住,所以加了 margin-top header的高度 在这个大div上加
display: inline-block的总结
游坦之的博客
08-21 2242
我尝试了很多种办法，设置高度，浮动，定位什么的都没有用，后来看了一下网易云音乐的源代码，发现他用到了这个display:inline-block;同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。由效果图可以看出，display：block 虽然支持宽高、内边距、外边距的设置，但是每一个block后面，都会默认自动添加一个换行符。由效果图可以看出，inline不支持设置宽高、内边距，外边距，即使设置了也不会产生应有的效果。
webpack中不显示-webkit-box-orient这个css属性
小花同学的成长之路
09-12 1413
今天在写vue项目时发现webpack打包时不会解析 -webkit-box-orient 这个属性，解决方法如下。 /*! autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */  ...
学习bootstrap遇到的第一个问题
weixin_57062916的博客
08-17 431
学习bootstrap遇到的第一个问题
-webkit-line-clamp 多行文字溢出...
菜鸟前端的博客
06-24 3万+
CSS代码： .box { width: 100px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } HTML代码： <div class="box"> 多行文字溢出多行文字溢出多...
Vue中一些需要注意的点（采坑）
热门推荐
xidongdong1的博客
11-23 3万+
前言：记录在学Vue中需要注意的问题 1.给link添加事件、给组件绑定原生事件 在vue-router1中使用v-link写入路由，但是在vue-router2中要使用router-link写入路由，在浏览器渲染的时候会把router-link渲染成a。 有时候需要为router-link注册事件，对于一般的html元素，直接使用@click="eventFun"即可，但是对于rout
css文字超出省略号
最新发布
03-20
嗯，用户想用CSS实现文字溢出时显示省略号的效果。首先，我需要回忆一下相关的CSS属性。记得单行文本的话，通常用text-overflow: ellipsis，但还需要配合其他属性。比如overflow: hidden来隐藏超出部分，white-space...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值