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

2023-12-13 04:23:10

需求

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

期望的效果如下

思路

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

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

解决方法

代码

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

文章来源:https://blog.csdn.net/T3165919332/article/details/134825336
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。