我不会前端
我不会前端
  • 发布:2022-06-02 16:30
  • 更新:2024-01-29 22:15
  • 阅读:1709

nvue 多个 text 换行并且超出省略

分类:nvue

话不多说,就想问各方大佬(包括官方大佬),在nvue页面中如下附件里面的效果如何实现:

2022-06-02 16:30 负责人:无 分享
已邀请:
FullStack

FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ:543610866

css搞超过2行,显示省略号

  • 我不会前端 (作者)

    nvue页面,不是vue页面哦

    2022-06-02 16:42

哈哈柚

哈哈柚

.lines-2{  
        overflow: hidden;  
        text-overflow: ellipsis;  
        lines: 2;  
    }

lines

  • 我不会前端 (作者)

    不行呀 老哥,你自己去用nvue页面布局搞一个我截图那个你就知道了

    2022-06-03 09:39

1***@qq.com

1***@qq.com

包裹一个div呢

1***@qq.com

1***@qq.com

把溢出隐藏显示省略号的样式绑定到
<view style="width: 200rpx">
<text class="text">文字</text>
</view>

.text{
overflow: hidden;
text-overflow: ellipsis;
lines: 2;
}

这样超出的就会隐藏显示省略号

  • 1***@qq.com

    溢出显示省略号的样式绑定到text上,然后给父盒子设置宽度

    2022-06-21 17:04

有事没事打断点

有事没事打断点

老哥解决了吗,这个两个text在同一行并且换行,可以用富文本解决,但是如果数字,文字,字母混合使用,数字和字母还是无法从中间断开换行,不知道官方还有没有更好的办法解决这个问题。

1***@qq.com

1***@qq.com

<rich-text style="font-size: 28rpx;lines:1; width: 550rpx;" :nodes="commentTextHandle()"></rich-text>
commentTextHandle() {
return [{
name: 'div',
attrs: {
style: 'display: flex;flex-direction: row;'
},
children: [{
type: 'text',
attrs: {
style: 'color: #5CC0D0;'
},
text: ${this.renderContent.comment[0].user.name}:
}, {
type: 'text',
attrs: {
style: 'color: #888888;'
},
text: ${this.renderContent.comment[0].content}
}]
}]

        },
  • 云开发接单

    你这个只是实现了在一行显示,但是并没有实现自动换行

    2022-12-23 22:02

  • DYY

    回复 云开发接单: 这个问题解决了吗?好困惑

    2023-03-11 19:47

1***@qq.com

1***@qq.com

nvue页面中, 文字一定要用 text标签包裹

1***@qq.com

1***@qq.com - 一切皆有可能~

你解决了没。。 现在也碰见这个问题了。头好疼。。

  • 张亚如

    你解决了吗?我也遇到了

    2023-11-02 11:10

  • 1***@qq.com

    回复 张亚如: 用空格来代替

    2023-11-02 11:15

  • 张亚如

    回复 1***@qq.com: 我解决了谢谢

    2023-11-06 17:07

  • 1***@qq.com

    回复 张亚如: 是用空格吗

    2023-11-13 17:56

  • 张亚如

    回复 1***@qq.com: lines: 2;用的这个

    2023-11-14 13:36

  • 1***@qq.com

    回复 张亚如: 你都不是这楼主的这个样式吧?跟我们不是同一个东西。

    2023-11-15 14:52

滚滚红尘

滚滚红尘

<view style="width:500rpx;">
<text style="color:#000000;font-size:28rpx;width: 500rpx;overflow: hidden; text-overflow: ellipsis; lines: 6;">很长的一段文字</text>
</view>

滚滚红尘

滚滚红尘

<view style="width:500rpx;">  
   <text style="color:#000000;font-size:28rpx;width: 500rpx;overflow: hidden; text-overflow: ellipsis; lines: 6;">很长的一段文字</text>  
 </view>

要回复问题请先登录注册