You can use line-clamp. This will truncate the amount of lines shown based on the value of -webkit-line-clamp
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
Browser support for this is good, apart from the usual lagger IE11
.
Find a full guide on how to use this on CSS Tricks.
Other solutions may be to limit the length of the text based on a given width. Setting the width
or the max-width
of the paragraph
tag.
1
solved how to limit paragraph display in html [closed]