There are a few different ways to truncate multi-line text with CSS:
text-overflow: ellipsis
property: This property will truncate the text and add an ellipsis (...) to the end of the visible text. To use this property, you'll need to set the overflow
property to hidden
and the white-space
property to nowrap
. For example:.truncate {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
max-height
and line-clamp
properties: This method allows you to specify the maximum number of lines that should be displayed before truncating the text. To use this method, you'll need to set the max-height
property to the maximum number of lines multiplied by the line height, and the line-clamp
property to the maximum number of lines. For example:.truncate {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
I hope these suggestions help! Let me know if you have any other questions.
Copyright © 2024 All rights reserved
PRIVACY POLICY