Overflow text with dots in CSS

When using a column layout and are not controlling the content, it can happen, that the content get's too long and kills the layout. To prevent this you can cut the content and still make this apparent to the user.

.overflow-dots { 
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  height: 2rem;
}

An example would be a url of a website. I often use this when using the column system of bootstrap:

<div class="row">
    <div class="col col-md-3 col-12">
        <span class="overflow-dots">
            <a href="#">
                https://my-really-long.url/with-a-lot-of-parameters?...
            </a>
        </span>
    </div>
    <div class="col col-md-9 col-12">
        ...
    </div>
</div>

Through the width: 100% this will be dynamic depending on the screen size.