一、核心代码
注意: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