text-overflow: ellipsis

by Daniel

HTML

<div class="flex">
  <div class="ellipsis">
    Какой-то ну очень длинный текст
  </div>
</div>

CSS

.flex{
  width: 75vw;
  height: 75vh;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.ellipsis{
  width: 100px;
  height: 2em;
  padding: 5px;
  line-height: 2em;
  border: 1px solid #aaa;
  
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}