多行文本溢出处理 - 自定义溢出显示内容

1、css处理溢出-多行省略号

css的设置如下：

.multiline-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 定义显示的行数 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
}

2、使用multiline-text-overflow插件处理

1、安装插件：

npm install multiline-text-overflow -S

2、对需要溢出处理的多行文本容器使用插件：

// css
.text-overflow {
  line-height: 25px; // 行高必须设置
}

// html
<div id="text_overflow" class="text-overflow">
    用于确定如何提示用户存在隐藏的溢出内容。其形式可以是显示一个省略号、显示一个自定义字符串或显示一个自定义组件。用于确定如何提示用户存在隐藏的溢出内容。其形式可以是显示一个省略号、显示一个自定义字符串或显示一个自定义组件。用于确定如何提示用户存在隐藏的溢出内容。其形式可以是显示一个省略号、显示一个自定义字符串或显示一个自定义组件。用于确定如何提示用户存在隐藏的溢出内容。其形式可以是显示一个省略号、显示一个自定义字符串或显示一个自定义组件。
</div>

// js
import multilineTextOverflow from 'multiline-text-overflow'
multilineTextOverflow({
  eleId: 'text_overflow',
  foldLines: 2,
  handleType: 'words'
})

各配置项的含义如下：

{
  eleId: 'text_overflow', // 需要处理多行溢出容易的id，必须
  foldLines: 2, // 溢出时显示的行数
  handleType: 'arrow', // 溢出部分显示的标识，可选值：ellipsis、arrow、words。其中ellipsis表示显示省略号，不可展开；arrow表示显示箭头图标，可展开收起；words表示显示展开/收起文字，可展开收起
  ifAnimation: false, // 展开收起是否有动画
  color: 'blue', // 展开收起的文字或箭头颜色，默认为蓝色
  backgroundColor: 'white' // 展开收起的文字背景颜色，默认为白色
}