Главная » Статьи » Усечение длинных заголовков

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

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

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

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

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

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

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

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

Длинные заголовки можно усечь используя свойство 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, скопируйте и вставьте код в этот транспилятор. Вот как будет выглядеть результат:

При необходимости вы всегда можете вернуться к резервному варианту с использованием 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.