Как скрыть лишний текст в блоке
Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.
HTML-разметка:
Первое что можно сделать, это установить высоту блока, а лишнее скрыть с помощью overflow: hidden .
.items-text
Результат будет не очень информативный:
Многоточие
Свойство text-overflow: ellipsis добавляет многоточие к скрываемому тексту и работает только в паре с white-space: nowrap (отменяет переносы строк). Но можно сделать такой приём для нескольких строк текста с помощью свойств display: -webkit-box и -webkit-line-clamp: 4 .
.items-text
Результат:
Градиент по тексту
В конец блока с текстом можно наложить абсолютный элемент с градиентом от прозрачного до белого, так получится эффект «затухания».
.items-text < overflow: hidden; position: relative; height: 62px; >.items-text:after
Результат:
Второй вариант с затуханием сверху вниз:
.items-text < overflow: hidden; position: relative; height: 62px; >.items-text:after
Результат:
Если используется фоновое изображение, то подойдёт вариант с использованием background-clip: text – наложение изображения или градиента на текст.
.items-text
15.04.2020, обновлено 21.02.2021
Предыдущая запись Contenteditable – текстовый редактор
Следующая запись Работа с архивами через SSH
Комментарии
Авторизуйтесь, чтобы добавить комментарий.
Другие публикации
Примеры, как вывести текст в три колонки одинаковой ширины и отступом между ними с помощью разных CSS-свойств.
Такой вопрос возникает при вставке текста из формы на сайт (отзывы, комментарии и т.д.) с форматированием элементом p.
Как скрыть часть текста под катом и развернуть (свернуть) по кнопке на HTML и CSS
Задача. Необходимо сделать такой функционал для блока с контентом, который будет по умолчанию скрывать часть его контента, а при нажатии на текст «Развернуть» контент блока должен раскрываться полностью, а текст сам «Развернуть» должен измениться на «Свернуть». И обратно – при клике на «Свернуть» контент должен частично скрыться. Например, это может быть применено в каталоге с товарами, где отображаются в несколько строк какие-то метки для фильтрации товаров. Или нужно просто скрыть часть текста в статье или на главной.
Пример:
«Под кат» означает «спрятать часть моей статьи» (вырезать, где cut — «резать» с англ.). Записи большого размера разбивают на две части: вводную часть и полный текст. Делается это, чтобы на главной странице сайта не было длинных постов, а только начало в несколько строк. Полную версию записи можно читать при клике на ссылку «Подробнее» и т.п.
CUT — с английского «резать, разрезать, отрезать», соответственно на сайтах это что-то вроде «линии отреза», которая разделяет анонс статьи и основную ее часть. На главной странице, большинства блогов, в том числе и на моем, выводятся не полные тексты постов, а только лишь их часть. Остальное же скрывается «под катом».
Решение 1. Чтобы убрать контент под кат можно использовать лишь HTML + CSS. Для этого нужно будет сам контент обернуть в div и назначить свой класс. Добавить тег input типа чекбокс перед обернутым контентом. В конец контента добавить пустой див с еще одним своим классом. После обернутого контента добавить label. Вот HTML и CSS Код №1 для примера:
Все для начинающего вебмастера
Обучающие статьи и советы, как правильно сделать сайт и настроить сервер
Как скрыть ссылку в тексте
Довольно часто веб-мастера и пользователи сталкиваются с необходимость скрыть ссылку в тексте. ПНапример, хотят сделать так, что бы не было видно, на какой именно сайт ведет ссылка. Такой подход крайне популярен для продвижения реферальных ссылок.
Вначале скажем, что мы не являемся сторонниками скрытия какого-либо контента на сайтах. Не совсем хорошо на своем сайте ограничивать информацию для пользователей. Поскольку многие задаются вопросом, как наиболее правильно скрыть ссылку от пользователей, то мы рассмотрим этот момент более подробно.
Скрытие ссылки на странице сайта
При необходимости спрятать ссылку в текста или на странице, нам понадобится заннаие языка программирования HTML, либо же CSS. Например, пропишем следующий HTML-код:
В CSS-коде надо прописать тот же стиль, что используется для основного контента, т.е. самого текста. Например, чтобы текст ссылки никак не выделялся из основного текста, пропишем следующее:
a.ssilka, a.ssilka: visited, a.ssilka: hover
Данный CSS код сделает так, чтобы ссылка никак не выделялась, а сливалась вместе с обычным текстом.
Прячем анкор ссылки
Например, когда создается реферальная ссылка, и вы хотите придать ей вид обычной ссылки. В таком случае применяется следующий код:
Если навести курсор на такую ссылку, то она будет отображаться, как сокращенная ссылка. К примеру, будет отображаться ссылка на сайт partner.com, а на самом деле будет выполняться переход по ссылке на partner.com/?partner=ваш партнерский номер. Что в итоге позволит привлечь вам еще одного рефералла.
Редиректы с помощью html или php
Такой метод, пожалуй, самый убедительный из всех представленных. Пользователю будет выдаваться ссылка, которая ведет по сути на ваш собственный сайт — внутренняя ссылка. На самом деле за подобной ссылкорй может прятятся внешняя, которая ведет на совершенно другой ресурс. Например, выполняться редирект на определенную страницу в вашим реферальным кодом.
Редирект посредством html:
Переходим на сайт суперпродукт.ru
Редирект посредством php:
Преимущества применения редиректа на языке php заключается в следующем, к примеру, можно посредством php сделать счетчик переходов или загрузок.
Сервисы сокращения ссылок
Самый простой метод для сокращения ссылок — это воспользоваться специальным сервисом по сокращению ссылок, например, от Google, и называется он − goo.gl. На самом деле сервисов для сокращения ссылок существуют достаточно много, но самыми удобными и распространенным является goo.gl.
В данной статье мы познакомили вас с различными методами скрытия ссылок. А вот какой уже применить каждый выбирает индивидуально.
text-overflow
Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto , scroll или hidden .
Синтаксис
text-overflow: clip | ellipsis
Значения
clip Текст обрезается по размеру области. ellipsis Текст обрезается и к концу строки добавляется многоточие.
HTML5 CSS3 IE Cr Op Sa Fx
text-overflow
Результат данного примера показан на рис. 1.
Рис. 1. Многоточие в конце текста
Браузеры
Opera с версии 9.0 до версии 11.0 использует нестандартное свойство -o-text-overflow .