溢出的文字省略号显示三部曲
/*1. 先强制一行内显示文本*/white-space: nowrap;/*2. 超出的部分隐藏*/overflow: hidden;/*3. 文字用省略号替代超出的部分*/text-overflow: ellipsis;
示例
控制行数溢出隐藏
overflow: hidden;text-overflow: ellipsis;display: -webkit-box;word-wrap:break-word; // 数字以及字母处理word-break: break-all; // 纯数字或纯字母不会自动换行-webkit-box-orient: vertical;-webkit-line-clamp: 6; // 显示6行
示例
文字两端对齐：
text-overflow: ellipsis;
但是，不支持火狐，可用插件：
npm install @clampy-js/vue-clampyyarn install @clampy-js/vue-clampy
import VClamp from 'vue-clamp'
directives: {clampy}
<p v-clampy="3">Long text to clamp here</p>
