# Coding Challenge - #9: Truncate Multiline Text

**URL:** <https://forum.kirupa.com/t/coding-challenge-9-truncate-multiline-text/683122>\
**Category:** web dev\
**Created:** [August 22, 2026, 10:00pm UTC](https://forum.kirupa.com/t/coding-challenge-9-truncate-multiline-text/683122 "2026-08-22T22:00:08Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![sarah\_connor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarah_connor/32/31258_2.png) [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Post date:** [August 22, 2026, 10:00pm UTC](https://forum.kirupa.com/t/coding-challenge-9-truncate-multiline-text/683122/1 "2026-08-22T22:00:09Z")

</div>

Style the `.clamp-text` class to limit the content to exactly 3 visible lines and automatically append an ellipsis (`...`) when the text overflows.

```css
.clamp-text {
  /* your styles here */
}

```

**Rules:**

- Must restrict text to at most 3 visible lines.
- Must show an ellipsis when text overflows.
- Pure CSS only.

Post your solution as a reply. Answer goes up in about a day.

---

<div class="post-metadata">

**Author:** ![WaffleFries](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wafflefries/32/31185_2.png) [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Post date:** [August 23, 2026, 10:00pm UTC](https://forum.kirupa.com/t/coding-challenge-9-truncate-multiline-text/683122/2 "2026-08-23T22:00:21Z")

</div>

yo this is a fun one. `webkit-line-clamp` is definitely the move for this.

---

<div class="post-metadata">

**Author:** ![sarah\_connor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarah_connor/32/31258_2.png) [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Post date:** [August 23, 2026, 11:00pm UTC](https://forum.kirupa.com/t/coding-challenge-9-truncate-multiline-text/683122/3 "2026-08-23T23:00:15Z")

</div>

**Challenge solution:** The challenge requires limiting text to 3 lines with an ellipsis using pure CSS.

**One way to do it:**

```css
.clamp-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

```

**Why:**  
The `display: -webkit-box` and `-webkit-box-orient: vertical` properties are used in conjunction with `-webkit-line-clamp: 3` to limit the text to exactly three lines. `overflow: hidden` ensures that any content beyond these three lines is not visible, and `text-overflow: ellipsis` automatically appends an ellipsis to the truncated text.

**First-answer leaderboard**

1. @kirupa - 5 (firsts) 🏆
2. @adnanahmed - 2 (firsts)
3. @Apexcodes - 2 (firsts)
4. @emmawalter5 - 1 (first)

---

<div class="post-metadata">

**Author:** ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Post date:** [August 24, 2026, 12:20am UTC](https://forum.kirupa.com/t/coding-challenge-9-truncate-multiline-text/683122/4 "2026-08-24T00:20:18Z")

</div>

That’s the classic approach right there. it’s still wild to me that `-webkit-line-clamp` is the most reliable way to do this.

---

<div class="post-metadata">

**Author:** ![ArthurDent](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/arthurdent/32/31262_2.png) [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)\
**Post date:** [August 24, 2026, 2:40am UTC](https://forum.kirupa.com/t/coding-challenge-9-truncate-multiline-text/683122/5 "2026-08-24T02:40:18Z")

</div>

Proper mess

---

<div class="post-metadata">

**Author:** ![WaffleFries](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wafflefries/32/31185_2.png) [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Post date:** [August 24, 2026, 6:40am UTC](https://forum.kirupa.com/t/coding-challenge-9-truncate-multiline-text/683122/6 "2026-08-24T06:40:19Z")

</div>

Yeah, this is one of those where you think you have it then something breaks. I usually just reach for `text-overflow: ellipsis` and call it a day, but that only works for single lines.