Усечение длинных заголовков

Усечение длинных заголовков

От автора: примеры того, как вы можете использовать CSS или JavaScript для работы с длинными строками текста. Если вы когда-нибудь имели дело с блогом, то понимаете всю боль, связанную с тем, как оформить длинные заголовки статьи. Комбинация длинных слов, больших размеров шрифта и нереального количества пробелов заставляют дизайнеров тихо рыдать в сторонке.

Данный отрывок из блога является примером, иллюстрирующим недостатки длинных заголовков. Ниже приведены некоторые примеры того, как мы можем справиться с подобными типографическими трудностями.

Усечение с помощью CSS

Если вам нужно просто обрезать текст, то первый пример с использованием text-overflow: clip; как раз для вас.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Вот как выглядит результат:

Длинные заголовки можно усечь используя свойство CSS text-overflow: clip;. Стоит также упомянуть, что базовый API для усечения уже доступен во всех основных браузерах, однако, некоторые из других примеров, приведённых ниже, могут быть еще доступными.

Усечение многоточием с помощью CSS

Вы можете также усечь текст многоточием, для этого понадобится другое значение данного свойства text-overflow: ellipsis.

Мы получаем следующий результат:

Расширение приведённой выше техники обрезки с помощью многоточия: text-overflow: ellipsis;

Резервный вариант с помощью JavaScript

Методы усечения с помощью CSS великолепны, и я рекомендую их применять в 90% случаев, но порой вам может понадобиться обратиться за помощью к JavaScript. Может быть, вы не хотите, чтобы содержимое было доступно для чтения с экрана? Мало ли, я не осуждаю (по крайней мере, в этом посте), вот как вы можете применить то же самое усечение многоточием в JavaScript.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Примечание: Вышеприведённый код использует несколько методов ES2015 (стрелочные функции и параметры по умолчанию). Если вам нужна версия ES5, скопируйте и вставьте код в этот транспилятор. Вот как будет выглядеть результат:

При необходимости вы всегда можете вернуться к резервному варианту с использованием JavaScript.

Усечение с использованием пользовательских символов CSS (только в Firefox)

Возвращаясь к теме CSS, вы можете усечь текст при помощи пользовательских символов, передавая строку в text-overflow. К сожалению, на сегодняшний день этот метод доступен только для Firefox.

Посмотрим, как это работает:

Только Firefox поддерживает text-overflow с пользовательскими символами

Резервный вариант JavaScript

В качестве запасного варианта, вы можете использовать JavaScript, чтобы обеспечить возможность усечь текст с помощью пользовательских символов в других браузерах, а не в Firefox.

Примечание: Опять же, вышеприведённый код использует несколько техник ES2015 (стрелочные функции и параметры по умолчанию). Если вам нужна версия ES5, скопируйте и вставьте код в этот транспилятор. Посмотрим, как это будет выглядеть:

Вы можете создать запасной вариант с пользовательскими символами в JavaScript

Вы можете поделиться другими интересными примерами усечения строк? Мне было бы очень любопытно узнать про любые способы, связанные с SVG, и посмотреть их в действии.

Автор: Luke Whitehouse

Источник: https://assortment.io/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree