use-dotdotdot

A hook to use CSS property, line-clamp, for the long text.

If only one line, use text-overflow for the long text.

If the browser doesn't support line-clamp and need multiline text, use the canvas api, measureText, to generate clamp text.

Installation

npm install use-dotdotdot

or

yarn add use-dotdotdot

Props

Name	Type	Description
width?	string or number	The width of wrapper. If not provide, the width is 100%
maxLines	number	How many lines at most
wrapper?	React.ElementType	Default value is span

Example

import { useDotdotdot } from 'use-dotdotdot';

const App = () => {
  const { wrapperProps, clampText } = useDotdotdot({ maxLines: 2 });

  return (
    <div {...wrapperProps}>
      {clampText(
        'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex, deleniti. Ratione voluptatibus ducimus pariatur ab eaque ut vitae, reprehenderit, fugit corrupti quas impedit eum, aut veniam facilis voluptate commodi non?'
      )}
    </div>
  );
};

or use useDotdotdot create your own Component