900字范文 > css 文本溢出处理（单行文本显示 ... 多行文本显示指定行数且可展开）

css 文本溢出处理（单行文本显示 ... 多行文本显示指定行数且可展开）

时间：2020-11-06 07:49:54

1、单行文本溢出，显示 …

<template><div class="text-div">{{value }}</div></template><script>export default{data(){return {value: '单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本',}}}</script><style lang="scss" scoped>.text-div{width: 300px;height: 16px;margin: 20px 0;/*单行文本溢出*/overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}</style>

结果显示如下：

2、多行文本溢出，显示指定行数 + …

<template><div class="text-div"><span class="content-box">{{value}}</span></div></template><script>export default{data(){return {value: `多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本`}}}</script><style lang="scss" scoped>.text-div{width: 300px;margin: 20px 0;position: relative;/*多行文本溢出*/.content-box{display: -webkit-box;display: -moz-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 3}}</style>

结果显示如下：

3、多行文本溢出，显示指定行数 + …+展开、收起按钮

<template><div class="text-div"><span class="content-box" :style="contentStyle">{{value}}</span><span class="btn-box" @click="toggleClass">{{btnName}}<i :class="btnName === '展开' ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"></i></span></div></template><script>export default{data(){return {value: `多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本`,btnName: '展开', //按钮文字：展开、收起}},computed: {contentStyle(){return {'-webkit-line-clamp': this.btnName==='展开' ? 3 : 100000}}},methods: {// 点击展开或收起按钮事件toggleClass(){this.btnName = this.btnName === '展开' ? '收起' : '展开'},}}</script><style lang="scss" scoped>.text-div{width: 300px;margin: 20px 0;position: relative;/*多行文本溢出*/.content-box{display: -webkit-box;display: -moz-box;overflow: hidden;-webkit-box-orient: vertical;}/*展开、收起按钮样式*/.btn-box{position: absolute;bottom: 0;right: -45px;cursor: pointer;color: #1482f0;}}</style>

结果显示如下：

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。