Css实现多行文字，超出n行显示省略号，总高度一致

效果图.png

当 n为3时，css代码如下：

    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    height: calc(3rem);

为了实现鼠标停留时，展示完整文字，封装组件 ——React版：

import React from 'react';

/**
 * 利用 a标签的 title属性
 * @param {String} text 展示的文案
 * @param {Boolean} multiLine 多行行数，单行不传
 */
const ElementA = (text, multiLine=false) => {
  return (
    <a
      style={{
        color: 'inherit',
        cursor: 'inherit',
        display: multiLine ? '-webkit-box' : 'inline-block',
        width: '100%',
        whiteSpace: multiLine ? 'normal' : 'nowrap',
        textOverflow: 'ellipsis',
        overflow: 'hidden',
        WebkitLineClamp: multiLine || 1,
        WebkitBoxOrient: multiLine ? 'vertical' : '',
        height: multiLine ? `calc(${multiLine} * 1rem)` : 'auto',
      }}
      title={text}
    >
      {text}
    </a>
  );
};

export default ElementA;

// 组件中使用方法：
// ElementA('展示的文案限制 3 行', 3);
// ElementA('展示的文案限制 1 行');