【微信小程序】text-overflow失效

已于 2022-03-13 21:24:10 修改
阅读量1.1k 收藏 3
点赞数 3
分类专栏： 微信小程序 文章标签： 微信小程序 css css3
于 2022-02-22 22:49:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MinfCONS/article/details/123079355
版权
该博客探讨了CSS中实现文本溢出隐藏的必要组合属性，包括`overflow:hidden`，`text-overflow:ellipsis`和`white-space:nowrap`。当这些样式不起作用时，建议设置宽度并使用`display:inline-block`。文章提供了详细解释和实践指导，适用于前端开发者优化网页布局和用户体验。
摘要由CSDN通过智能技术生成 
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

上面三个缺一不可，如果仍不行，加下面两行

  width: xxx
  display: inline-block;

更多参考本文：https://www.zoo.team/article/text-overflow

少年歌行s
关注
专栏目录
微信小程序 文字超出view宽度后、超过行数后隐藏显示省略号
Dove言和
09-04 8643
这是设置了需要显示3行，超出后隐藏并用省略号代替显示 1、单行显示： overflow:hidden; //隐藏溢出 text-overflow:ellipsis;//当文本溢出包含元素时显示省略符号来代表被修剪的文本 white-space:nowrap; //规定段落中的文本不进行换行 2、规定行数显示 display: -webkit-box; word-break: b...
微信小程序对cover-view标签设置border没效果（手机不显示）
Mr_chen95的博客
02-05 1万+
跟我的另一篇博客有些相似之处，都是在手机上不显示的问题，这次是border不显示，最近在做的一个项目，cover-view跟map结合一起使用，对cover-view设置border无效，现在都没找到原因，不过有一个解决的办法 比如我要给一个cover-view设置底部边框，我会在下面再添加一个cover-view，给第二个cover-view设置宽度百分之百，高度为1个像素，说白了就是模拟边框
微信小程序 text-overflow 设置无效的问题
monkeyfly学前端
09-07 1万+
Write By Monkeyfly 以下内容均为原创，如需转载请注明出处。 前提 今天突然发现小程序页面中之前设置的文字超出省略显示的效果在真机上显示无效。但是微信开发者工具上的手机模拟器可以正常显示省略号(...)。 //文本溢出单行省略的代码如下： overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 然后就...
微信小程序css中配置了文字超出一行或两行则显示省略号对纯数字或纯字母或小数点无效的解决办法
最新发布
番茄Salad
08-03 459
微信小程序css中配置了文字超出一行或两行则显示省略号对纯数字或纯字母或小数点无效的解决办法
【小程序开发】文本text-overflow属性的使用
weixin_30632089的博客
01-04 482
text-overflow原本是CSS3的一个属性，在微信小程序中也支持。 text-overflow文本溢出显示省略号~ 注：使用text-overflow时，需要设置固定的宽度才起作用，所以该元素必须具有块状元素的属性（款装元素+行内块状元素） 1、一行文本溢出显示省略号 overflow: hidden; white-space:nowrap; text-overflow: ...
text-overflow:ellipsis失效
Mahuicool的博客
04-26 801
text-overflow:ellipses用于设置文本超出显示‘…’，工作中遇到设置不上的问题，所以总结一下。
文本溢出解决text-overflow: ellipsis；不生效的问题
高性价比服务器就选：蓝易云
03-14 1810
如果以上都无法解决问题，可能需要检查是否有其他CSS规则覆盖了你的样式，或者浏览器是否支持。用于隐藏超出元素宽度的内容，
微信小程序 设置文本溢出加省略号不生效，文本超出3行加省略号
PrimaryColor
08-05 4071
css添加以下代码，并应用其样式。 .text-deal{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-all; /* 追加这一行代码 */ } -webkit-line-clamp为3，代表三行后超出隐藏加省略，常用为1。 ...
微信小程序scroll-view横向滑动嵌套for循环的示例代码
10-17
在微信小程序开发中，`scroll-view`组件是一个非常重要的部分，它允许用户在内容超过屏幕范围时进行滚动浏览。在本文中，我们将深入探讨如何在`scroll-view`中实现横向滑动并结合`for`循环展示数据。我们将讨论布局...
微信小程序实现多行文字超出部分省略号显示功能
10-16
在微信小程序的开发过程中，有时候我们需要对长文本进行合理的展示，特别是在列表中，为了保持界面的整洁和美观，我们可能需要限制文字的显示行数，超出部分则用省略号表示。本文将详细介绍如何在微信小程序中实现这...
微信小程序----列表横向滑动
qq_40081888的博客
05-26 2241
先上效果图 横向滑动列表 js主要代码： /*超值优惠区*/ chaozhilist:[ { url:"", image:"https://i02piccdn.sogoucdn.com/69e33946ebd9ce5c", restaurantName:"铁板烧", foodname:"小龙虾超值豪华套餐"...
使用text-overflow:ellipsis实现溢出文本省略号显示无需js
12-13
今天在做jsp页面展示的时候碰到一个实现溢出文本显示省略号的需求 原本使用js截取字符串然后判断字符串长度实现，不过相对比较繁琐，并且字符串长度不能自适应 听说用css的 text-overflow: ellipsis 也可以实现，于是尝试了下。 发现除了设置 text-overflow 属性为 ellipsis 外 还需要设置 white-space 属性为 nowrap （限制不换行） 和 overflow 属性为 hidden （隐藏溢出） 即设置样式 style="text-overflow:ellipsis; white-space: nowrap; overflow:
微信小程序单行文本自动换行溢出部分省略号显示无效
04-17 1392
微信小程序单行文本溢出部分省略号显示无效,解决办法，亲测有效！ .text-cut { width: 300rpx; display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 另外这个标签，最好使用 ,不要使用 。 <view class="text_index text...
微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-overflow 文本溢出
杭州.黄老师
01-14 945
基础用法 text-overflow 属性规定当文本溢出包含元素时发生的事情。 text-overflow: clip | ellipsis | string 值 描述 clip 修剪文本。 ellipsis 显示省略符号来代表被修剪的文本。 string 使用给定的字符串来代表被修剪的文本。 小程序应用 Wxml代码 &lt;view class='cls'&gt; 当我成熟以后，我发...
（已解决）text-overflow: ellipsis； 不生效 问题
qq_68469751的博客
08-16 2447
text-overflow: ellipsis； 不生效 问题...............
微信小程序内解决view内文字过多溢出
Pumily的脱发历程
10-16 3900
【代码】微信小程序内解决view内文字过多溢出。
text-overflow: ellipsis不生效的几种情况（记录一下）
qq_32166301的博客
06-13 2018
2.容器不可以是flex布局，若要使用flex布局，可以用flex布局的父元素包裹。text-overflow: ellipsis不生效的几种情况。1.没有给容器添加固定宽度。
解决溢出文本打点不生效的问题（white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 都写了的情况下）
threewhisky的博客
07-17 8033
今天做的一个项目，中间可以用单行溢出文本打点来提高用户体验，于是直接写下单行文本溢出打点三件套： white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 结果傻眼了，根本不生效，试了各种方法，如把文本所在的标签变成块级标签等等，并没有用。 bd之，却只搜得到一些没用的建议。于是转战google。 结果一搜就找...
微信小程序css篇---文本溢出
热门推荐
鎏嫣宫守护的博客
12-22 1万+
最为一名Android开发人员，现在无法拖控件写布局真的是一件很麻烦的事啊,所以css样式成为了我做项目的最大隐患，遇到的问题可能做前端的人员看到会觉得很低端，但没办法我还是记录下来吧，多遇到几次就会了，废话不多说，今天遇到的是text一行显示，多的省略----文本溢出的问题。 如果是一行显示的时候，写在view里的样式，会在最后显示省略号，但要是写在text组件中设置这个样式的话就是最后多出来
微信小程序overflow-x: scroll失效
05-31
在微信小程序中，如果设置了`overflow-x: scroll`或`overflow-y: scroll`，但是发现滚动条没有出现或者滚动不起来，有可能是因为`scroll-view`的子元素没有设置宽度或高度导致的。在`scroll-view`中，只有当子元素的尺寸大于`scroll-view`的尺寸时，才会出现滚动条。 解决方法是对`scroll-view`的子元素设置合适的宽度或高度，例如： ```html <scroll-view style="width: 100%; height: 200px; overflow-x: scroll;"> <view style="width: 500px; height: 200px;">这是一个很宽的视图</view> </scroll-view> ``` 在这个例子中，`scroll-view`的高度为200px，宽度为100%，并且设置了`overflow-x: scroll`。子元素`view`的宽度为500px，高度为200px。这样，当子元素的宽度大于`scroll-view`的宽度时，就会出现横向滚动条。如果子元素的宽度小于或等于`scroll-view`的宽度，则不会出现横向滚动条。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值