运营小程序学习笔记

weixin_47560716

于 2023-03-20 15:33:10 发布

阅读量66

点赞数

文章标签：小程序学习 javascript

本文链接：https://blog.youkuaiyun.com/weixin_47560716/article/details/129665812

版权

这篇文章探讨了如何使用CSS属性`white-space`,`overflow`,`text-overflow`来控制文本在固定宽度容器中不换行、隐藏溢出部分并显示省略号。示例代码展示了如何限制多行文本显示为三行并截断多余内容。

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

1：在这里插入图片描述

   {  white-space: nowrap;  //文字不换行
      overflow: hidden;//溢出隐藏
      text-overflow: ellipsis;//超出文字用。。。代替
      }

2：在这里插入图片描述

   .text {
      width: 450rpx;
      display: block;
      font-size: 22rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      word-break: break-all;
      -webkit-box-orient: vertical;
    }