# Text doesn't respect the boundaries and overflows even with ellipsis turned on

**URL:** https://community.weweb.io/t/text-doesnt-respect-the-boundaries-and-overflows-even-with-ellipsis-turned-on/5865
**Category:** How do I?
**Tags:** design
**Created:** [December 11, 2023, 1:28am UTC](https://community.weweb.io/t/text-doesnt-respect-the-boundaries-and-overflows-even-with-ellipsis-turned-on/5865 "2023-12-11T01:28:54Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Micah](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/micah/32/9102_2.png) [@Micah](https://community.weweb.io/u/Micah)
#### Post date: [December 11, 2023, 1:28am UTC](https://community.weweb.io/t/text-doesnt-respect-the-boundaries-and-overflows-even-with-ellipsis-turned-on/5865/1 "2023-12-11T01:28:54Z")

</div>

I’m facing an issue where I can’t figure out how to make this text properly start disappearing with the ellipsis dots. I have a predefined width on my main elements, which is my sidebar and I was expecting for the text to respect that, but it’s not. I feel like I’ve checked everywhere and tried defining my widths everywhere by putting a 100 percent on all of the containers nested inside the main sidebar element.

I’m probably missing something obvious but would anyone have a clue as to what’s causing the issue?

[![](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/274b256e9669326cd407a959057823712f522527.jpeg "stopppp the overflow.") ](https://www.youtube.com/watch?v=FkY5sinkkH4)

---

<div class="post-metadata">

### Author: ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)
#### Post date: [December 11, 2023, 12:25pm UTC](https://community.weweb.io/t/text-doesnt-respect-the-boundaries-and-overflows-even-with-ellipsis-turned-on/5865/2 "2023-12-11T12:25:01Z")

</div>

Have you tried going to preview mode?

---

<div class="post-metadata">

### Author: ![Micah](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/micah/32/9102_2.png) [@Micah](https://community.weweb.io/u/Micah)
#### Post date: [December 11, 2023, 2:52pm UTC](https://community.weweb.io/t/text-doesnt-respect-the-boundaries-and-overflows-even-with-ellipsis-turned-on/5865/3 "2023-12-11T14:52:36Z")

</div>

Yes, it’s the same either way

---

<div class="post-metadata">

### Author: ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)
#### Post date: [December 11, 2023, 3:19pm UTC](https://community.weweb.io/t/text-doesnt-respect-the-boundaries-and-overflows-even-with-ellipsis-turned-on/5865/4 "2023-12-11T15:19:05Z")

</div>

You should try setting width on the parent of the text

---

<div class="post-metadata">

### Author: ![the\_sms](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/the_sms/32/5978_2.png) [@the\_sms](https://community.weweb.io/u/the_sms)
#### Post date: [December 11, 2023, 10:17pm UTC](https://community.weweb.io/t/text-doesnt-respect-the-boundaries-and-overflows-even-with-ellipsis-turned-on/5865/5 "2023-12-11T22:17:21Z")

</div>

@Micah I don’t think “hidden” will work when you have “auto” set for width. If you give the width a specific size I think the hidden will correctly truncate/hide the text. I think I saw you change the text width from 100% to auto before you scrolled down and changed the overflow?