На любом сайте есть блоки, которые ограничены в ширине и иногда важно, чтобы какая-либо строка не переходила на вторую строчку при излишней длине. В CSS есть свойства, которые позволяют урезать текст до нужного размера. В этой записи я покажу два способов, один из них будет с использованием JavaScript.
Демо
21516
.content-fixed имеет фиксированную ширину 200 пикселей.
#css-example урезан с помощью CSS как только текст достигает 200 пикселей.
#js-example урезан с помощью JS. Обрезанности текста зависит от настроек того, что напишет пользователь. Допустим если это будет 5, то текст будет обрезан после 5-го символа.
Подробнее о каждом способе вы можете почитать ниже.
Чистый CSS
Давайте возьмем следующий пример:
.shorten {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Из него видно, что ширина у класса ограниченная — 250 пикселей. На третьей строке, мы указываем, что весь текст должен быть однострочный (white-space: nowrap;). На четвертой строке, спрячем излишние элементы текста за границей блока (overflow: hidden;) и text-overflow выполняет роль проставления «…»(троеточия) после строки.
В этом примере ширину элемента можно поставить 100% и тогда строка будет обрезаться только когда ширина .shorten будет равна родителю. Допустим .shorten находится внутри .widget, ширина которого 300 пикселей. Тем самым как только ширина .shorten станет близка к 300, то в конце строки сразу же появится троеточие и остатки текста не будут показаны.
У этого способа есть и плохие стороны — это например, плохая поддержка в Opera и Firefox, но это не мешает использовать его, так как стили все равно выполняют свою работу. Баг заключается в том, что не проставляется троеточие, но сам текст все равно обрезается.
ВНИМАНИЕ! Если для вас важно поддержка всех браузеров, тогда обратите на JS пример, который я описываю ниже.
А как же JavaScript?
А теперь давайте посмотрим на JavaScript пример:
function shorten(text, maxLength) {
var ret = text;
if (ret.length > maxLength) {
ret = ret.substr(0,maxLength) + "...";
}
return ret;
}
Это всего лишь простая функция, которая принимает в себя два аргумента (text и maxLength).
text — текст, который нужно обрезать
maxLength — это максимальная длинна текста до которого он будет урезан
Например, если вы в вызовите функцию следующим образом — shorten('привет, как дела', '3'), то функция вернет вам «при…».
Я не буду углубляться в этот пример, так как он очень простой и нет смысла его мусолить. Если у вас есть вопрос — напишите его под записью.
…
Чудо символ о котором не многие знаю. Это символ троеточия, который состоит из одного символа. То есть вместо трех точек, у вас будет один символ состоящий из трех точек.
Из JS примера выше, вы можете заменить троеточие на …, чтобы сэкономить пространство, если это для вас является важным.
Послесловие
На этом все. Я же все таки советую использовать CSS вариант, чтобы в итоге не прибегать к JS хакам. Если же для вас важно, чтобы троеточие отображалось одинаково на всех браузерах, тогда я советую вам использовать JS пример, так как он увеличит шансы корректного отображения.
