单行/多行文字超出显示省略号...css实现

最新推荐文章于 2024-12-04 08:56:45 发布

女生也可以敲代码

最新推荐文章于 2024-12-04 08:56:45 发布

阅读量177

点赞数

分类专栏： vue 文章标签： css

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

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

1. 单行文本溢出显示为 …
效果:
在这里插入图片描述
代码:

<view class="scrollItem">
      <image src="../static/images/head.jpeg"></image>
      <text>今天写了这个小程序,用来开发一个音乐器</text>
</view>

css样式实现:

.scrollItem text {
  font-size: 24rpx;
  overflow: hidden;
  white-space: nowrap;
  display: block;
  text-overflow: ellipsis; /* 省略用...显示 */
}

2. 多行文本溢出显示为 …
效果:
在这里插入图片描述
页面代码:

<view class="scrollItem">
      <image src="../static/images/head.jpeg"></image>
      <text>今天写了这个小程序,用来开发一个音乐器</text>
</view>

css样式

.scrollItem text {
  font-size: 24rpx;
  overflow: hidden;
  display: -webkit-box; /* 多行文本需设置这个属性 */
  -webkit-box-orient: vertical; /* 设置对其模式 */
  -webkit-line-clamp: 2; /* 显示几行 */
  text-overflow: ellipsis; /* 省略用...显示 */
}