JSFiddle - React, Tailwind, and code Playground

by Roman

HTML

<div>
<p class="height-ellipsis">Длинный текст, выходящий за все разумное, ну могут менеджеры навводить, ну ни как без этого, пытаются впишнуть не впихуемое, а мы беремени потом голову, что бы все красиво было и не разьехалось, вот такая судьба брат</p>
</div>


<!-- 
UPD FOR STACKOVERFLOW 
https://ru.stackoverflow.com/questions/1067669/overflow-ellipsis-и-ограничение-по-высоте-или-dotdotdot-на-css
-->
<div>
<p class="line-clamp clamp-4">Длинный текст, выходящий за все разумное, ну могут менеджеры навводить, ну ни как без этого, пытаются впишнуть не впихуемое, а мы беремени потом голову, что бы все красиво было и не разьехалось, вот такая судьба брат</p>
</div>

SCSS

div {
  width: 200px;
  height: 100px;
  border: 1px solid gray;
  border-radius: 6px;
  padding: 10px;
}
.height-ellipsis {
  position: relative;
  height: 70px;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
  overflow: hidden;
  &:after {
      content: "...";
      position: absolute;
      bottom: 0;
      right: 0;
  }
}
.line-clamp {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* номер строки где указывается троеточие */
    -webkit-box-orient: vertical;
    &.clamp-2 { -webkit-line-clamp: 2; }
    &.clamp-3 { -webkit-line-clamp: 3; }
    &.clamp-4 { -webkit-line-clamp: 4; }
    &.clamp-5 { -webkit-line-clamp: 5; }
    &.clamp-6 { -webkit-line-clamp: 6; }
    &.clamp-7 { -webkit-line-clamp: 7; }
}