文本溢出

前言

网易云音乐中的歌单文本信息是超过两行的文本部分隐藏，用…代替

---

<!-- 推荐歌曲区域 -->
  <view class="recommendContainer">
    <view class="header">
      <text class="title">推荐歌曲</text>
      <view>
        <text>为你精心推荐</text>
        <text class="more">查看更多</text>
      </view>
    </view>

    <scroll-view class="scrollWrap" scroll-x enable-flex>
      <view class="scrollItem">
        <image src=""></image>
        <text class="">慢摇封赏｜迢迢岁月哈哈哈哈哈哈哈哈哈哈</text>
      </view>
      <view class="scrollItem">
        <image src=""></image>
        <text class="">慢摇封赏｜迢迢岁月</text>
      </view>
      <view class="scrollItem">
        <image src=""></image>
        <text class="">慢摇封赏｜迢迢岁月</text>
      </view>
      <view class="scrollItem">
        <image src=""></image>
        <text class="">慢摇封赏｜迢迢岁月</text>
      </view>
      <view class="scrollItem">
        <image src=""></image>
        <text class="">慢摇封赏｜迢迢岁月</text>
      </view>
    </scroll-view>
  </view>

一、单行文本溢出隐藏 省略号代替

.recommendContainer .scrollWrap .scrollItem text{
  /* 单行文本溢出隐藏 */
  display: block;
  font-size: 26rpx;
  // 文本超过单行__不换行
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

二、多行文本溢出隐藏 省略号代替

.recommendContainer .scrollWrap .scrollItem text{
  /* 多行文本溢出隐藏 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 设置对齐模式 */
  -webkit-box-orient: vertical;
  /* 设置盒子的行数 */
  -webkit-line-clamp: 2;
}