How to Prevent Text from Overflowing in CSS

CSS Prevent text from overflowing the parent div

No one gave me the right answer, so I kept trying and it turns out that it works if you simply set parent to display: table; and child to display: table-row;

Prevent text overflowing DIV when parent DIV width is set by percentage

Flexbox can do that:

.strip {  width: 90vw;  display: flex;  margin:auto;}
.img {  border: 1PX solid red;  width: 50px;}
.title {  border: 1px solid green;  white-space: nowrap;}
.description {  flex:1;  border: 1px solid blue;  min-width: 0;}
.description p {  min-width: 0;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}

<div class="strip">

  <div class="img">    IMG  </div>
  <div class="title">    <p>      Rotten Tomatoes    </p>  </div>
  <div class="description">    <p>      Rotten Tomatoes, home of the Tomatometer, is the most trusted measurement of quality for Movies & TV. Rotten Tomatoes, home of the Tomatometer, is the most trusted measurement of quality for Movies & TV.    </p>  </div>
</div>

Prevent content from overflowing horizontally

If you want the text to not over flow the green container, you need to set the overflow there.

          <v-alert text color="success" class="prevent-overflow">

will be where you aim.
Just to be clear, overflow sets on the contained items, when you set an over flow to your div, what you mean is - I want whats inside of this div to act like this if it goes beyond it.

For the ellipsis you will need to set 2 things, 1 is on the title add text-over: ellipsis, no need in word wrap and all, it will just cause the text to go down, unless thats what you want.
Second thing is to set width to the div that holds the text directly.

In your case for a quick fix you can do for example:

.v-list-item__title {
  width: 20px;
}
.prevent-overflow2 {
  text-overflow: ellipsis;
  
}

how can i prevent overflowing button?

It is overflowing because of your padding: .5em. The text is bigger than the available space you give it.

There are multiple ways to fix that, here you have two:

1. Hide overflow

You can add overflow: hidden to your buttons, now to button won't grow with the text.

2. Give text more space by changing the padding

You can change padding: .5em to padding-block: .5em. With that you are setting the padings only on top and bottom of the button, not left and right.

---

Related Topics