uni-app 之 文字分两行显示超出用省略号表示

uni-app 之 文字分两行显示超出用省略号表示

vue 将一大串文字分两行显示超出用省略号表示

通过css设置文字强制不换行超出用省略号表示:

复制代码
{
    white-space: nowrap; 文本强制不换行;
    text-overflow:ellipsis; 文本溢出显示省略号;
    overflow:hidden; 溢出的部分隐藏;
}

image.png

如果要想显示两行超出用省略号表示:

复制代码
        text {
            height: 35px;
            font-size: 12px;
            transform: scale(0.9);
            transform-origin: 0 0;
            // -webkit-transform-origin-x: 0;
            // -webkit-transform: scale(0.01);

            // 设置为两行。当文本内容超过两行时,将会自动隐藏多余的部分
            overflow: hidden;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。

常见结合属性:

1,display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。

2,-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

3,text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号"..."隐藏超出范围的文本 。

相关推荐
alphageek812 小时前
Electron开源库入门教程:跨平台桌面应用框架
javascript·其他·electron·开源
00后程序员张12 小时前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
小桥风满袖12 小时前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
张拭心12 小时前
这就是流量的力量吗?用豆包 AI 编程做的xhs小组件帖子爆了
前端·ai编程·豆包marscode
少年阿闯~~12 小时前
CSS3的新特性
前端·javascript·css3
IT_陈寒12 小时前
React性能优化:这5个Hook技巧让我的组件渲染效率提升50%(附代码对比)
前端·人工智能·后端
智能化咨询13 小时前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang13 小时前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼13 小时前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试