uniapp 限制行数超出部分使用省略号

-小C_

已于 2023-06-19 09:22:30 修改

阅读量863

点赞数 1

分类专栏： uniapp 文章标签： uni-app 前端

于 2023-06-19 09:22:19 首次发布

本文链接：https://blog.csdn.net/m0_75107188/article/details/131060552

版权

uniapp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该文章介绍了如何使用CSS样式来处理文本超出指定宽度和行数的情况，通过`overflow:hidden`隐藏超出部分，`word-break:break-all`允许单词内换行，`text-overflow:ellipsis`添加省略号，以及使用伸缩盒模型`-webkit-line-clamp`控制显示的行数，达到文本截断的效果。

摘要由CSDN通过智能技术生成

设置超出指定宽度和指定行数的情况下替换为省略号...

页面内容

<view class="itemTRR">
    {{item.executeUserName?item.executeUserName:'暂无'}}
</view>

css内容

.itemTRR{
    overflow: hidden;
    word-break: break-all;  /* 允许在单词内换行 */
    text-overflow: ellipsis;  /* 省略号 */
    display: -webkit-box; /* 伸缩盒子模型 */
    -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-line-clamp: 1; /* 显示的行数 */    
}