Нашёл нужно свойство, попробуйте его:
https://developer.mozilla.org/en-US/docs/Web/CSS/t...
Для обрезки текста в размер блока и ставки троеточия в конце можно использовать свойство CSS
text-overflow. Это свойство указывает, как отображать текст, когда он переполняет блок. Для обрезки текста и ставки троеточия в конце нужно указать значение ellipsis. Например:
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Свойство
overflow: hidden указывает, что все содержимое, которое не помещается в блок, должно быть скрыто. Свойство
white-space: nowrap указывает, что текст не должен переноситься на новую строку. Таким образом, текст будет обрезан и ставится троеточие в конце.
Обратите внимание, что этот способ работает только для однострочного текста. Для многострочного текста можно использовать другой подход, например, установку максимальной высоты блока и указание свойства overflow: hidden, чтобы скрыть текст, который не помещается в блок. Также можно указать свойство text-overflow: ellipsis, чтобы добавить троеточие в конце текста. Например:
.ellipsis {
max-height: 50px;
overflow: hidden;
text-overflow: ellipsis;
}
Этот код устанавливает максимальную высоту блока равной 50 пикселам, скрывает текст, который не помещается в блок, и ставит троеточие в конце текста.
Обратите внимание, что этот подход работает только в браузерах, поддерживающих свойство
text-overflow. В некоторых старых браузерах это свойство может не работать.
Если вам нужно реализовать обрезку текста с троеточием в конце на всех браузерах, возможно, вам понадобится использовать JavaScript для реализации этой функциональности.
UPD:
Чтобы разбить текст из одного тега p на две колонки с обрезкой троеточием в конце, вы можете использовать следующий код:
<style>
.columns {
column-count: 2;
column-gap: 16px;
max-height: 500px;
overflow: hidden;
}
.columns p {
break-inside: avoid;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
<div class="columns">
<p>Здесь будет длинный текст, который будет разбит на две колонки с обрезкой троеточием в конце, если он превышает максимальную высоту 500 пикселов</p>
</div>
Свойство
column-count указывает количество колонок,
column-gap - расстояние между колонками,
max-height - максимальную высоту,
overflow: hidden - скрывает текст, который не помещается в блок.
Свойство
break-inside: avoid указывает, что текст не должен разбиваться на новую строку внутри колонки. Свойство
text-overflow: ellipsis указывает, что троеточие должно быть добавлено в конце текста, если он не помещается в блок.
Свойство
overflow: hidden указывает, что все содержимое, которое не помещается в блок, должно быть скрыто. Это свойство нужно указывать для каждой колонки, чтобы текст в них обрезался с троеточием в конце.
Обратите внимание, что этот подход работает только в браузерах, поддерживающих свойства
column-count и
text-overflow. В некоторых старых браузерах эти свойства могут не работать.
