Menu
I want to show only the first 3 lines of the paragraph below using HTML formatting. I am searching on W3Schools but it doesn't show how to do it.
<body>
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlor
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
</body>
461
Set the height of the paragraph to three line-heigths. Like -
p{
line-height:1.2em;
height:3.6em;
overflow:hidden;
}
Set overflow to hidden to hide overflowing text
110
You can use -webkit-line-clamp property with div.
div {
width: 100%;
line-height: 1.2em;
height: 3.6em;
background-color: gainsboro;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}<div>
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
</div>You can give the container a height and line-height and set its overflow property to hidden:
HTML
<p>loremloremlorem...</p>
CSS
p {
height:60px;
line-height:20px; /* Height / no. of lines to display */
overflow:hidden;
}
JSFiddle example.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
