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

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

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

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

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

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

.truncate-with-css {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

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

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

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

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

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

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

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

.truncate-with-css-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

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

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

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

/**
 * Basic truncation example with JS
 */
const basicTruncate = (str, strLgth = 30) => {
  const truncStr = str.substring(0, strLgth);

  return str.length > strLgth ? `${truncStr}...` : str;
};

const example = document.getElementById('truncation-with-js')
const truncText = basicTruncate(example.textContent);
example.textContent = truncText;

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

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

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

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

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

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

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

.truncate-with-css-customchar {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: "-!!-";
}

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

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

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

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

/**
 * Truncation with custom characters in the place of the text.
 */
const truncateWithCustomChars = (str, strLgth = 30, custChar = '...') => {
  const truncStr = str.substring(0, strLgth);

  return str.length > strLgth ? `${truncStr}${custChar}` : str;
};

const example2 = document.getElementById('truncate-with-js-customchar')
const truncText2 = truncateWithCustomChars(example2.textContent, 30, '£%!?*');
example2.textContent = truncText2;

Примечание: Опять же, вышеприведённый код использует несколько техник 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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree