MultiLineEllipsis React with CSSModules

MultiLineEllipsis.js

import React from 'react';
import PropTypes from 'prop-types';
import styles from './styles.css';

function getStyles(fontSize, lineHeight, linesToShow) {
  return {
    fontSize,
    lineHeight,
    height: fontSize * lineHeight * linesToShow,
    WebkitLineClamp: linesToShow,
  };
}

function MultiLineEllipsis({ text, fontSize, lineHeight, linesToShow }) {
  return (
    <span
      className={styles.clamp}
      style={getStyles(fontSize, lineHeight, linesToShow)}
    >
      {text}
    </span>
  );
}

MultiLineEllipsis.propTypes = {
  text: PropTypes.node.isRequired,
  fontSize: PropTypes.number,
  lineHeight: PropTypes.number,
  linesToShow: PropTypes.number,
};

MultiLineEllipsis.defaultProps = {
  fontSize: 14,
  lineHeight: 1.2,
  linesToShow: 3,
};

export default MultiLineEllipsis;

styles.css

.clamp {
  --font-size: 14px;
  --line-height: 1.2;
  --lines-to-show: 3;

  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 100%;
  color: inherit;
  height: calc(var(--font-size) * var(--line-height) * var(--lines-to-show)); /* Fallback for non-webkit */
  margin: 0;
  padding: 0;
  font-size: var(--font-size);
  line-height: var(--line-height);
  -webkit-line-clamp: var(--lines-to-show);
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}