Show first 3 lines in HTML paragraph

Question

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>

The answer you've accepted **wrong** (it has no `overflow` specified so wouldn't hide anything), it would show 4 lines rather than 3 if it did. Why on earth was that marked as the correct answer? — James Donnelly, Mar 26 '13 at 08:41
don't use the w3school website , it harms the education , see w3fools.com — Anurag-Sharma, Mar 27 '13 at 02:40
see http://stackoverflow.com/questions/3404508/cross-browsers-mult-lines-text-overflow-with-ellipsis-appended-within-a-widthhe — Adriano, Mar 17 '15 at 13:43

score 20 · Answer 1 · answered Mar 25 '13 at 10:34

20

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.

answered Mar 25 '13 at 10:34

James Donnelly

126,410
34
208
218

svineet · Answer 2 · 2013-03-25T11:34:35.930

16

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

edited Mar 25 '13 at 11:34

answered Mar 25 '13 at 10:34

svineet

1,859
1
17
28

However, `line-height` should normally be set to a value larger than `1em`, e.g. `1.2em`. That’s normal typography, for readability. – Jukka K. Korpela Mar 25 '13 at 11:30

score 6 · Answer 3 · answered Feb 18 '20 at 07:22

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>

Show first 3 lines in HTML paragraph

3 Answers3

Linked