css文字多行显示超出显示省略号

首先，要知道css的三条属性。

overflow:hidden; //超出的文本隐藏

text-overflow:ellipsis;//溢出用省略号显示

white-space:nowrap;//溢出不换行

css3解决了这个问题，解决方法如下：

display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）

-webkit-line-clamp:2;//这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。

最后实现的代码：

(仅限于手动书写css的情况)

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; // 参考 https://github.com/postcss/autoprefixer/issues/776

(适用于webpack配合预编译工具的情况，会自动将-webkit-box-orient 清除)

打包时必须使用这种方法打包，否则打包后 -webkit-box-orient: vertical 便会消失.

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* autoprefixer: off */
  -webkit-box-orient: vertical; // 参考 https://github.com/postcss/autoprefixer/issues/776
  /* autoprefixer: on */

通常情况下，上面这种注释的方式就有效了，如果因为种种原因无效，尝试另外一种通过 optimize-css-assets-webpack-plugin 插件也能解决这个问题。前提是项目本身就适用了这个插件，不然为了“换行省略号”这个效果去多安装一个webpack插件就不划算了。

注释掉webpack.prod.conf.js中下面的代码

new OptimizeCSSPlugin({
  cssProcessorOptions: config.build.productionSourceMap
    ? { safe: true, map: { inline: false } }
    : { safe: true }
}),

demo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .container {
      width: 100px;
      /* height: 20px; */
    }

    .container p {
      font-size: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  </style>


</head>

<body>

  <div class="container">
    <td>
      <p>
        你在组件中使用你在组件中使用你在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入
        store）：
      </p>
    </td>
  </div>

</body>

</html>

需要注意的一点是，如果换行处是一个完整的英文单词，换行不会将单词拆开，而是会直接将整个单词省略并显示省略号。

css文字多行显示超出显示省略号

demo

猜你喜欢