HTML/CSS: Specify number of lines inside <span>

Question

I have a PHP-Webapp and a span, that looks something like this:

<span><?= $text ?></span>

I would like to make sure, that the span has only one line. So if the text is too long, I would like to not show the last words. Can I do that using HTML/CSS? Or do I have to shorten the text with PHP/Javascript?

Answer 1

How about this? (obviously you would set thewidth to whatever it needs to be on the page)

The text-overflow: ellipsis is CSS3 and will only be supported in modern browsers, so in older ones you will get a nasty mid-letter/word cut off at the end.

span{display: block; width: 100px; overflow: hidden; word-wrap: break-word; text-overflow: ellipsis;}

Answer 2

I recommend to you below code

span {
        display: -webkit-box;
        -webkit-line-clamp: 2;  // <- you can change rows number
        -webkit-box-orient: vertical;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
}