Как при помощи CSS обрезать длинный текст.

Мы всегда хотим что бы на сайте все было аккуратно, но например у вас есть блоки с текстом который необходимо вписать в определенные границы , это может быть анонс к статье или описание товара. При этом текст у нас произвольной длины . Конечно можно постоянно подгонять текст под размеры поля что бы не чего не ехало, а можно сделать так чтобы лишний текст скрывался.

Для этого есть простое решение на CSS. Использование свойства text-overflow: ellipsis , которое позволяет обрезать строку с длинным тестом. Для того чтобы данное решение сработало необходимо указать ширину родительского блока, и иметь свойство overflow равное hidden или clip.

Решение для однострочного текста:

CSS:

.box-text {
  text-overflow: ellipsis; //образка длинных блоков с текстом
  overflow: hidden; //прятать выходящий за пределы текст
  width: 100%; //ширина блока с текстом
  white-space: nowrap; //запрет на перенос текста
}

HTML:

<div class="box-text">
Всё их оборудование и инструменты были живыми, в той или иной форме.
</div>

Пример:

Решение для многострочного текста:

Но вот для обрезки многострочного текста на CSS придется прибегнуть к помощи псевдо-элементов :before и :after.

CSS:

.box-text {
    overflow: hidden;
    height: 200px;
    line-height: 25px;
}
.box-text:before {
    content: "";
    float: left;
    width: 5px;
    height: 200px;
}
.box-text > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px;
}		
.box-text:after {
    content: "\02026";
    box-sizing: content-box;
    float: right;
    position: relative;
    top: -25px;
    left: 100%; 
    width: 3em;
    margin-left: -3em;
    padding-right: 5px;	
    text-align: right;
    background-size: 100% 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

HTML:

<div class="box-text">
Левая сторона леса была темна, в тени; правая, мокрая, глянцевитая, блестела на солнце, чуть колыхаясь от ветра. Все было в цвету; соловьи трещали и перекатывались то близко, то далеко. 
</div>

Пример: