一、核心代码

  注意：text-overflow 必须要搭配 white-space 才能生效

overflow: hidden; /* 文字溢出隐藏 */
white-space: nowrap; /* 文字强制文字不换行，也就是一行显示 */
text-overflow: ellipsis; /* 溢出文字省略号代替 */

二、演示代码

<view>
  <view style="height: 100rpx;background-color: rgb(255, 153, 0);"></view>
  <!-- 核心盒子 -->
  <view class="csAbnormalityBox">
    <view>
      呆呆的夏天，置身于风灌满两袖的青石小径上，忽然想起曾经。在树影婆娑打晃的午后， 长藤爬满记忆的围墙，故事很长，却不知从何开场。
    </view>
    <view style="height: 80rpx;"></view>
    <view class="titleBox">
      呆呆的夏天，置身于风灌满两袖的青石小径上，忽然想起曾经。在树影婆娑打晃的午后， 长藤爬满记忆的围墙，故事很长，却不知从何开场。
    </view>
  </view>
  <!-- 核心盒子 -end -->
  <view style="height: 100rpx;background-color: rgb(76, 0, 255);"></view>
</view>



// css
.csAbnormalityBox{
  height: 300rpx;
  padding: 40rpx 0;
}
.titleBox {
  overflow: hidden; /* 文字溢出隐藏 */
  white-space: nowrap; /* 文字强制文字不换行，也就是一行显示 */
  text-overflow: ellipsis; /* 溢出文字省略号代替 */
}

三、导致BUG（微信小程序端）

第一种写法：

 第二种写法：