uniapp 设置内容超长时的省略样式

需求

在uniapp中，页面在展示搜索历史的时候，需要对内容过长的进行处理，也就是文本超出我的最大长度时，不允许换行，且末尾为省略

期望的效果如下

思路

使用 官网 text-overflow 可选值俩个

• clip 修建文本
• ellipsis 显示省略符号来代表被修剪的文本

解决方法

代码

.center_item{
			max-width:calc(100%-60rpx);/*盒子最大宽度*/
			overflow: hidden;
			text-overflow: ellipsis; /* 设置文本溢出时显示省略号 */
			white-space: nowrap; /* 设置不换行 */
}