文本溢出隐藏展示省略号，单行、多行、半行

1、单行文本溢出隐藏

示例图：

style样式

这是一串很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长长长很长的文本

2、多行文本溢出展示省略号

示例图：

style样式

这是一串很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本

小程序中多行文本溢出展示省略号

display: -webkit-box; /设置为弹性盒子/
-webkit-line-clamp: 5; /最多显示5行/
overflow: hidden; /超出隐藏/
text-overflow: ellipsis; /超出显示为省略号/
-webkit-box-orient: vertical;
word-break: break-all; /强制英文单词自动换行/

示例

3、非整行展示省略号

先看示例：

示例

父组件内引用：

• line 控制多少行开始隐藏，可设置小数
• text 控制展示的文本

import textExtend from './components/textExtend.vue'
export default{
  components: {textExtend},
}

子组件：

• 图片路径记得换

*项目中使用到了，一时没有好的解决方法，然后问了我的好兄弟，摘抄自好兄弟

02584EA6.gif