需求

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

期望的效果如下

思路

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

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

解决方法

代码

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