HTML & CSS · Middle · Question 65 of 75

How do you truncate text to three lines with an ellipsis?

.excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

✓Correct answer: With line-clamp (still used with the -webkit- prefix and display: -webkit-box)
2With text-overflow: ellipsis alone
3With max-lines: 3

Explanation

text-overflow: ellipsis works only for a single line (with white-space: nowrap and overflow: hidden). The prefixed line-clamp pattern is supported in all modern browsers.

How do you truncate text to three lines with an ellipsis?

Explanation

Further reading

Problem with a question

Test yourself