How to cut off text that doesn't fit?

Question

css

We need to make sure that each card title is one-line, while not showing a fixed text size, but choosing the amount depending on whether the text will wrap or not. Is there an option to listen to the resize event and check the size of the outer div, if it's larger than necessary, then delete some of the text before the div's size is restored, are there any better/easier options?

Answer 1

can be done through css, if for the title, then we forbid it to be more than one line like this.

selector{
    display: flex;
    align-items: left;
    max-width: 40px;
    overflow-x: hidden;
    white-space: nowrap;
}

You can put dots at the end of the block For the main text (which is several lines) do the same, just add max-height with overflow-y: hidden; and remove white-space