Vant：多行文字变一行文字，其余变省略号

最新推荐文章于 2025-03-05 17:22:26 发布
原创 最新推荐文章于 2025-03-05 17:22:26 发布 · 2.7k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css3 #html5 #前端
本文介绍了如何使用CSS3实现当文本内容超过容器宽度时，将多行文字转换为一行并显示省略号的效果，适用于前端开发中的文字展示优化。

文字省略

当文本内容长度超过容器最大宽度时，自动省略多余的文本。

<!-- 最多显示一行 -->
<div class="van-ellipsis">这是一段最多显示一行的文字，多余的内容会被省略</div>

<!-- 最多显示两行 -->
<div class="van-multi-ellipsis--l2">
  这是一段最多显示两行的文字，多余的内容会被省略
</div>

<!-- 最多显示三行 -->
<div class="van-multi-ellipsis--l3">
  这是一段最多显示三行的文字，多余的内容会被省略
</div>
目前功能最多的带流量主微信工具箱小程序.zip
12-23
这是一款云开发超多功能工具箱组合微信小程序源码附带流量主功能，小程序内包含了40余个功能，堪称全能工具箱了，大致功能如下： 证件照制作 垃圾分类查询 个性签名制作 二维码生成丨文字九宫格 手持弹幕丨照片压缩 照片编辑丨照片裁剪 照片拼图丨长图拼接 图片格式转换丨图片批量加文字 图片加马赛克丨图片文字识别 九宫格切图丨文字转图片 花式字体丨翅膀昵称 彩色昵称丨文字表情 字符表情丨亲戚计算器 指南针丨闪光灯 计算器丨水平仪 量角器丨尺子 房贷计算器丨个税计算器 复利计算器丨养老金计算器 预产期计算器丨胎儿体重计算器 安全期计算器丨保质期计算器 血压分析计算器丨日期日历计算器等
antd vue table ellipsis属性不生效
Admin_yws的博客
04-27 4439
//ellipsis: true不生效代码 <a-tooltip slot="status" slot-scope="text" placement="top" :title="text" :arrow-point-at-center="true" > <div>{{ text }}</div> </a-tooltip> //将div改
vue移动端项目vant组件库之style内置样式
笑望灬星辰
02-22 2420
vue移动端项目vant组件库之style内置样式 <template> <div> <h3>文字省略</h3> <!-- 最多显示一行 --> <div class="van-ellipsis"> nklnhkn能看出那可能nklnhkn能看出那可能nklnhkn能看出那可能nklnhkn能看出那可能nklnhkn能看出那可能nklnhkn能看出那可能nklnhkn能看出那可能nklnhkn能看
多行文本自动收起并可展开功能
故里的博客
02-22 1416
多行文本自动收起并可展开功能
列表分页的实现-使用vant 2.x下的van-list
最新发布
2301_76891881的博客
03-05 1779
this.newsList.length >= this.totalElements ||//判定方式一:新闻列表newsList的元素数量已经达到了能够请求的总元素数量。const res = await this.loadPageData(this.currentPage)//注意这里后面不能直接取.datas。this.newsList = [...this.newsList, ...res.datas.content]//数组拼接。this.loading = false//结束加载状态。
vue+vant组件库文本超出多行显示省略号
weixin_44215068的博客
05-06 3166
在使用van-grid遇到了问题，源代码如下： section h3{ font-size: .3733rem; font-weight: 400; overflow: hidden; //超出的文本隐藏 text-overflow: ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出则不换行 } 使用 white-space:nowrap 会让原本的样式出现问题，如图： 现在使用css3可以解决这个问题，强制不换行
vant的picker组件设置文字超长滚动
shb7433185的博客
09-17 3839
我们的手机端使用vant来做前端UI框架。 今天在使用vant的picker组件时候，遇到了一个问题。当文字过长的时候，vant的处理方式是ellipsis，超长部分显示【…】 如果恰好省略号前边内容相同，用户就无法区分选项了。如图： vant没有提供滚动的实现方式，所以我们自己兼容实现一下。 首先，打开开发者工具看下dom结构 我的思路是，如果在选中状态下，内层文字div长度大于外层的时候。给内层增加一个滚动动画效果。 实现如下： 重写.van-ellipsis两个样式，去掉ellipsis效果和o
设置white-space: nowrap文字为一行显示，导致父盒子被撑大的问题及解决方案
qq_43710066的博客
06-29 2984
开发移动端项目的时候碰到文字太长的情况，想进行不换行处理，超出显示省略号这里为了使一行显示3个按钮，开发时采用了vant组件库中的van-grid设置后实现的效果虽然文字超出显示省略号了，但是由于部分文字内容过长，导致父盒子被撑大显示，影响整体的布局效果。
vue+vant文本超出多行按省略号显示
qq_46239275的博客
07-15 4275
今天做移动端项目，遇到了这个问题 首先，我们要知道css的三条属性。 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出则不换行 这里不符合我们的要求所有舍弃掉 css3完美解决了这个问题，解决方法如下： display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸
CSS控制文字，超出部分显示省略号
code
10-11 200
<pstyle="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。 实现方法： overflow:hidden; text...
vue 文本超过2行展示更多：列表做法、单个文本做法
野蛮女孩的博客
07-21 1965
【代码】vue 文本超过2行展示更多：列表做法、单个文本做法。
vant TextEllipsis 组件实现文字省略 主要代码
kilito_01的博客
08-25 1628
【代码】vant TextEllipsis 组件实现文字省略 主要代码。
css实现多行文本超出显示省略号
空白的博客
07-12 352
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
微信小程序view控件自动换行
whyyouo的专栏
08-26 7273
微信小程序、注册协议动态下发多个，需要知道换行，同时点击跳转协议内容场景需求。
《vue+vant 文本超出两行部分省略号显示》
wangfaringdehao的博客
07-13 3550
今天做移动端项目，遇到了这个问题 面向百度后总结得到了这个结果。 首先，我们要知道css的三条属性。 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出则不换行 这里不符合我们的要求所有舍弃掉 css3完美解决了这个问题，解决方法如下： display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical;.
vant4的TextEllipsis 文本省略，禁用展开，收起方法
qq_52335038的博客
04-02 2902
实现多行文本展示，规定大于3行，显示省略号...和查看全部按钮；（并且考虑兼容性问题）
Flex布局下如何使用text-overflow:ellipsis省略过长文本
Hello博客
01-30 4490
问题 试想一下我们如何通过Flex布局实现下面这个组件呢？ 中间显示的文字内容过长是可以自动省略 Flex布局实现方法一(推荐) HTML： <div class="container"> <div class="field"> <div class="title">文本输入</div> <div cl...
element-plus中的tooltip组件实现文字溢出显示省略号，悬浮显示tooltip完整信息
m0_46627730的博客
03-01 4698
tooltip文字溢出显示省略号，精准控制文字溢出的 tooltip 显示
封装当文字过长时显示省略号和tooltip，以及多行溢出时显示tooltip
鹤渺的星球
06-06 4813
项目中很多地方需要显示一些字段信息，比如项目信息，项目说明的字段，总会有需求是显示当字段内容过多的时候，加省略号显示，然后显示tooltip。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值