css超出两行显示省略号

最新推荐文章于 2024-08-03 10:09:39 发布

女生也可以敲代码

最新推荐文章于 2024-08-03 10:09:39 发布

阅读量150

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_47793882/article/details/130951185

版权

该段代码展示了如何在微信小程序中使用wx:for指令动态渲染列表，结合wx:key进行数据绑定。同时，通过CSS类.ellipsis实现多行文本溢出隐藏。此外，根据item.checkStatus的状态切换不同图标。

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

实现效果：
在这里插入图片描述

<view class="item" wx:for="{{ list }}" wx:for-item="item" wx:for-index="index" wx:key="index">
	<image class="game" src="{{ item.icon }}" lazy-load></image>
	<view class="ellipsis">{{item.name}}</view>
	<image class="icon" src="{{ item.checkStatus?'/static/img/icon-uncheck.png':'/static/img/icon-check.png' }}"></image>
</view>

添加css类：

.ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

女生也可以敲代码

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS实现超出两行显示省略号

2301_79325339的博客

09-23

3274

在网页开发中，当文本内容过长超出容器的宽度时，我们通常会希望将多余的文本部分省略并显示省略号，以保持页面的美观和布局的完整性。你可以根据自己的需要调整相关属性的值，以适应不同的场景和要求。通过以上的CSS设置，当文本内容超过两行时，多余的文本将被隐藏，并在末尾显示省略号，从而实现了超出两行显示省略号的效果。属性将元素的显示方式设置为基于弹性盒子，以便我们可以使用弹性盒子布局的相关属性。通过在CSS中为该类设置一些属性，我们实现了超出两行显示省略号的效果。这样，当文本超过两行时，多余的文本部分将被隐藏。

css 让文字在第二行超出显示省略号

weixin_46352558的博客

08-27

1927

p{ width:100px; overflow : hidden;/*必须结合的属性,当内容溢出元素框时发生的事情*/ text-overflow: ellipsis;/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。*/ display: -webkit-box;/*必须结合的属性，将对象作为弹性伸缩盒子模型显示。*/ -webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数。*/ -webkit-box-orien

参与评论您还未登录，请先登录后发表或查看评论

微信小程序超出两行或者多行显示省略号

qq_36437991的博客

09-15

733

微信小程序文字超出两行显示省略号

CSS让元素内容超出两行用省略号隐藏

HWL5679的博客

06-19

2080

-webkit-line-clamp和相关的WebKit属性不是标准的CSS属性，尽管它们在大多数现代浏览器中都得到了支持。

如何用CSS实现多行省略

hdxx2022的博客

03-03

3878

思路：用于挡住省略号的方块也是绝对定位，靠右定为， right:0，但是 bottom值就不要设置了，如果不设置的话，该方块会跟着文本内容的实际高度移动，而不是 max-height的高度。值得留意的是，上面代码里关于width的注释写着“因为下面设置了margin，所以这里的宽度值大小没有要求”，之前都要求小于等于 :before宽度，但是现在由于采用margin-left负值抵消了本身的宽度，所以这个要求转化对 padding-right了，这时是等于。所以，三个方案，总有一款符合你的需求的。

前端 CSS 经典：省略号

weixin_64684095的博客

11-20

4555

单行省略，双行省略，通用省略

css 超出两行显示省略号

08-12

这样，当内容超出两行时，超出部分会被隐藏并以省略号显示。123 #### 引用[.reference_title] - *1* *3* [CSS文本超过2行省略号（...）显示]...

css超出两行显示省略号不生效

最新发布

02-25

### CSS 文本超出两行显示省略号解决方案对于文本超出两行时无法正常显示省略号的问题，可以通过特定的CSS属性组合来实现预期的效果。具体来说，在定义容器宽度的同时，还需要利用`display: -webkit-box`以及一...

未宽度css超出两行显示省略号

02-12

### CSS 实现文字超出两行显示省略号 为了实现当文字超出两行时自动截断并显示省略号的效果，可以采用特定的 CSS 属性组合。这些属性能够确保文本在限定的高度内被优雅地裁剪，并以省略号的形式提示用户存在更多未...

CSS white-space属性效果（指定元素内的空白怎样处理）

哂笑年少°

08-17

878

CSS white-space属性指定元素内的空白怎样处理

css省略号

锦瑟年华L的博客

05-06

7836

css省略号

CSS文字省略：一行或多行省略

weixin_45670873的博客

03-26

1020

一行或多行文本省略效果

CSS 实现文本省略显示【单行，2行，多行】

gz_qiulinyong的博客

07-24

1万+

限制文本显示长度并以省略号表示超出部分是常见的需求。通过CSS，可以简单地实现这一效果。我们将分别介绍单行文本、省略两行文本和多行文本的实现方法。通过使用CSS中的和属性，可以轻松实现单行、多行文本的省略显示。无论是简单的单行文本省略还是复杂的多行文本省略，这些方法都能满足各种需求。

关于css的一些基础：css省略号

q1ngqingsky的博客

07-07

7034

以前总是记不住省略号，没有理解透彻「😮‍💨」css 单行省略号/css多行省略号 单行省略号有三个要素：多行文本省略号：【webkit内核】

微信小程序css中配置了文字超出一行或两行则显示省略号对纯数字或纯字母或小数点无效的解决办法

番茄Salad

08-03

850

微信小程序css中配置了文字超出一行或两行则显示省略号对纯数字或纯字母或小数点无效的解决办法

Css实现省略号...及悬浮层显示全部内容的方法：

SunPeng的博客

01-13

3万+

1、单行文本省略： overflow: hidden;//溢出隐藏 white-space: nowrap;//禁止换行 text-overflow: ellipsis;//... 2、多行文本省略： display:-moz-box;//火狐 display: -webkit-box;//谷歌 -webkit-box-orient: vertical; -webkit-line-clamp: 3;//显示几行 overflow: hidden; 注：英文自动换行： word-wrap:break-

CSS 省略号（单行省略号、多行省略号）