<div class="overflow-box">
  Loooonnnnnnnnngggggggg text
</div>
:root {
  --mixin-overflow-ellipsis: {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
}

.overflow-box{
  width: 100px;
  @apply --mixin-overflow-ellipsis;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.