От автора: примеры того, как вы можете использовать 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.
