How Can I Truncate Text on the Second Line Using CSS?

Truncating Text on Specific Lines in CSS: Unraveling the Ellipsis Enigma

Original Question:

"How can I achieve text ellipsis specifically on the second line using CSS? Despite searching the internet, I've come up empty-handed."

Answer:

While CSS does not provide a direct way to truncate text on a specific line, you can achieve this effect in webkit browsers with the following CSS properties:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Explanation:

• overflow: hidden: This property prevents the content from overflowing beyond the container's boundaries.
• text-overflow: ellipsis: This property instructs the browser to use ellipsis (...) when the text exceeds the available space.
• display: -webkit-box: This property sets the container to be a webkit box model, which allows for additional styling options.
• -webkit-line-clamp: 3: This property limits the container to three lines of text.
• -webkit-box-orient: vertical: This property sets the orientation of the box model to vertical, allowing the text to wrap to multiple lines.

Browser Support:

Note that this solution is only supported in webkit browsers, including Safari, Chrome, and Microsoft Edge.

The above is the detailed content of How Can I Truncate Text on the Second Line Using CSS?. For more information, please follow other related articles on the PHP Chinese website!