一、核心代码

注意：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（微信小程序端）

微信小程序存在问题

强制一行显示出现这种问题

解决方案两种

1.外层嵌套view

右侧内容过多的情况下兼容性问题有点多建议采用第二种，

例子右侧只有一个view，过多的view建议采用第二种方案

2.外层view包裹 + 定位，（强烈推荐）

具体实现是，左侧盒子logo图片之类的可以给一个view包裹，

给左侧盒子图片宽高大小的view，固定定位在item盒子左侧

整体的item盒子给一个左侧 padding-left：（照片宽度）

右侧盒子可以做display:flex;布局等功能，

方案2的好处是兼容性好，右侧盒子内容多的时候建议采用第二种兼容性写法，

第一种写法：

第二种写法：

CSS处理文字一行显示 超出用省略号。包含一个微信小程序使用css文字溢出一行显示的一个bug