I want to truncate a string on two lines with an ellipsis, but I don't know the exact length of the cut because the div that contains the string can have different widths.

CodePudding user response：

Have you looked into text-overflow: ellipses? Here are the MDN Docs

In this SO POST @StevenDon suggests to also set white-space: nowrap in addition to text-overflow: ellipses

CodePudding user response：

There is a non-standard but pretty well supported CSS property -webkit-line-clamp that does it. It has some drawbacks in cases where the text has nested HTML elements in it, but gives decent result it simple cases.

There are also React plugins for this like react-dotdotdot or react-truncate, but they also have some issues (e.g. need to control the resizing of the container).