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;,可以用来多行文本的情况下,用省略号"..."隐藏超出范围的文本 。

相关推荐
就爱瞎逛14 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
柚子81617 分钟前
sibling-index:我用这个画时钟表盘
前端·css
UI设计和前端开发从业者31 分钟前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘2 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志2 小时前
typescript结构化类型应用两例
javascript
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW2 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字3 小时前
Kotlin lazy 委托的底层实现原理
前端