css 溢出隐藏省略号代替

溢出的文字省略号显示三部曲

/*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-clampy
yarn install @clampy-js/vue-clampy

import VClamp from 'vue-clamp'

directives: {
    clampy
  }

<p v-clampy="3">Long text to clamp here</p>