Hide text if there is no width

If you have an element with some dynamic text, or need to adjust for responsive purposes, with this CSS you can set the max string size and add '...' after it

by Alvaro Aneiros

HTML

<div>
    <p> With the created classes, the text inside the buttons cannot exceed the width. If the string inside the buttons is bigger than the button widths, it will automatically cut the text.</p>
    <button class="btn_1">This is a very very long text</button>
    <button class="btn_2">This is a very very long text</button>               
</div>

CSS

.btn_1{
  width: 20%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn_2{
  width: 30%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}