Без лишних слов, начнем с кода!
1. Отобразите только одну строку текста, а затем скройте и опустите ее.
// Отобразить только одну строку текста, а затем опустить .element {
ширина: 300 пикселей; /* Необходимо установить фиксированную ширину */
пробел: nowrap; /* Принудительное отображение одной строки без переноса строк */
overflow: Hidden; /* Скрыть часть за пределами рамки */
text-overflow: ellipsis; /* Отображать лишние эллипсы */
}2. Отобразите указанное количество строк текста, а затем скройте и опустите его.
// Пропустить после отображения многострочного text.element {
ширина: 300 пикселей; /* Необходимо установить фиксированную ширину */
display: -webkit-box; /* Использовать гибкую компоновку блоков */
-webkit-box-orient: вертикальное /* вертикальное расположение */;
-webkit-line-clamp: 3 /* Отобразить три строки */;
overflow: Hidden; /* Скрыть часть за пределами рамки */
text-overflow: ellipsis; /* Отображать лишние эллипсы */
} Многострочный текст опускается с помощью display: -webkit-box; гибкая компоновка поля и -webkit-line-clamp для усечения многострочного текста.
Примечание. Этот метод подходит для основных браузеров WebKit (таких как Chrome, Safari и т. д.). Для других браузеров может потребоваться дополнительная поддержка полифилов.
Другие решения
1. Используйте JavaScript для динамического расчета высоты текстового содержимого и его усечения.
2. Используйте существующие библиотеки: например: Clamp.js.
Clamp.js: легкая библиотека для кроссбраузерного усечения многострочного текста.
//Одна строка $clamp(myHeader, {clamp: 1});
//Несколько строк $clamp(myHeader, {clamp: 3});
//Автоматически вычисляем количество строк на основе доступной высоты $clamp(myParagraph, {clamp: 'auto'});
//Автоматически вычисляем количество строк на основе фиксированной высоты $clamp(myParagraph, {clamp: '35px'}); 3. CSS Fallback (решение частичной совместимости)
Для некоторых браузеров, хотя прямая поддержка атрибута -webkit-line-clamp отсутствует, мы можем объединить его с простым CSS для достижения приблизительного эффекта.
.element {
display: блок; /* Отображение как блок */
переполнение: скрыто; /* Скрыть лишнее содержимое */
text-overflow: ellipsis; /* Отображать лишние эллипсы */
line-height: 1.5em /* Установить высоту строки */;
max-height: 4.5em; /* Максимальная высота 3 строк, 3 строки * высота 1,5 строки = 4,5em */
пробел: нормальный; /* сохраняем обычный перенос текста */
}Хотя эта схема не может обеспечить точное усечение многострочного текста во всех случаях, она по-прежнему подходит для поддержки базового отображения пропуска многострочного текста.
На этом завершается статья о сокрытии и отображении многоточий после того, как текст CSS превышает лимит, а также о других решениях, связанных с совместимостью браузеров. Дополнительные сведения о тексте CSS, превышающем скрытое содержимое, можно найти в предыдущих статьях на сайте downcodes.com или продолжить просмотр соответствующих статей ниже. Надеюсь, вы будете поддерживать downcodes.com и дальше!