Можно ли ограничить длину текста до «n» строк с помощью CSS (или обрезать ее при переполнении по вертикали).
text-overflow: ellipsis;
работает только для 1 строки текста.
Оригинальный текст:
Ultrices natoque mus mattis, aliquam, авария в pellentesque tincidunt
elit purus lectus, vel ut aliquet, elementum nunc
nunc rhoncus placerat urna! Сиди есть сед! Ut penatibus turpis
mus tincidunt! Dapibus sed aenean, magna sagittis, лорем велит
желаемый вывод (2 строки):
Ultrices natoque mus mattis, aliquam, авария в pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum ...
Ответы:
Есть способ сделать это, используя неофициальный синтаксис захвата строк , и начиная с Firefox 68, он работает во всех основных браузерах.
Если вы не заботитесь о пользователях IE, нет необходимости делать
line-height
иmax-height
запасные варианты.источник
-webkit-box-orient: vertical;
скрытностью при компиляции scss, попробуйте это/* autoprefixer: ignore next */ -webkit-box-orient: vertical;
Что вы можете сделать, это следующее:
где
max-height:
=line-height:
×<number-of-lines>
вem
.источник
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
чтобы сделать многоточие. Но это будет работать только в Chrome. Для решения, которое также работает в Firefox, посмотрите здесь: stackoverflow.com/a/20595073/1884158 А вот полезное руководство по этому вопросу: css-tricks.com/line-clampinРабочее кросс-браузерное решение
Эта проблема преследует нас всех в течение многих лет.
Чтобы помочь во всех случаях, я изложил подход, основанный только на CSS, и подход jQuery на случай, если cssats является проблемой.
Вот единственное CSS- решение, которое я придумала, которое работает при любых обстоятельствах, с небольшими оговорками.
Основы просты: он скрывает переполнение пролета и устанавливает максимальную высоту на основе высоты линии, как это предложил Евгений Ха.
Затем есть псевдокласс после содержащего элемента div, который красиво размещает многоточие.
Предостережения
Это решение всегда помещает многоточие, независимо от того, есть ли в этом необходимость.
Если последняя строка заканчивается конечным предложением, вы получите четыре точки ....
Вам нужно быть довольным обоснованным выравниванием текста.
Многоточие будет справа от текста, которое может выглядеть неряшливо.
Код + Фрагмент
jsfiddle
Подход jQuery
На мой взгляд, это лучшее решение, но не каждый может использовать JS. По сути, jQuery проверит любой элемент .text, и если число символов превышает заданное значение max var, оно обрежет все остальные и добавит многоточие.
В этом подходе нет предостережений, однако этот пример кода предназначен только для демонстрации основной идеи - я бы не стал использовать это в производстве, не улучшив его по двум причинам:
1) Он перепишет внутренний html .text elems. нужен ли или нет. 2) Не проверяется, что внутренний html не имеет вложенных элементов - поэтому вы очень полагаетесь на автора, чтобы правильно использовать .text.
Edited
Спасибо за улов @markzzz
Код и фрагмент
jsfiddle
источник
Насколько я вижу, это было бы возможно только при использовании,
height: (some em value); overflow: hidden
и даже тогда это не имело бы смысла...
в конце.Если это не вариант, я думаю, что это невозможно без некоторой предварительной обработки на стороне сервера (сложно, потому что поток текста невозможно предсказать надежно) или jQuery (возможно, но, вероятно, сложно).
источник
.mytext
с помощью jQuery, выяснить, содержит ли оно больше контента, чем видно, и добавить его...
вручную. Таким образом, вы совместимы с клиентами без JS, и клиенты с JS могут иметь оформление. Возможно, стоит ответить на отдельный вопрос для гуру jQuery; может быть возможно сделать относительно легкоРешение этой темы - использовать плагин jquery dotdotdot . Не CSS-решение, но оно дает вам множество опций для ссылок «читать дальше», динамического изменения размера и т. Д.
источник
Следующий класс CSS помог мне в получении двухстрочного многоточия.
источник
В настоящее время вы не можете, но в будущем вы сможете использовать
text-overflow:ellipis-lastline
. В настоящее время он доступен с префиксом вендора в Opera 10.60+: примеристочник
У меня есть решение, которое работает хорошо, но вместо многоточия оно использует градиент. Это работает, когда у вас есть динамический текст, поэтому вы не знаете, будет ли он достаточно длинным, чтобы нуждаться в эллипсе. Преимущества в том, что вам не нужно выполнять какие-либо вычисления JavaScript, он работает для контейнеров переменной ширины, включая ячейки таблицы, и является кросс-браузерным. Он использует пару дополнительных элементов div, но его очень легко реализовать.
Разметка:
CSS:
Сообщение блога: http://salzerdesign.com/blog/?p=453
пример страницы: http://salzerdesign.com/test/fade.html
источник
источник
Мне очень нравится line-зажим, но пока нет поддержки Firefox .. поэтому я иду с математическим кальком и просто скрываю переполнение
Теперь предположим, что вы хотите удалить и добавить этот класс через jQuery со ссылкой, вам понадобится дополнительный пиксель, чтобы максимальная высота составляла 63 пикселя, это потому, что вам нужно каждый раз проверять, если высота больше, чем 62px, но в случае 4 строк вы получите ложное значение true, поэтому дополнительный пиксель исправит это и не создаст никаких дополнительных проблем
я вставлю coffeescript для этого просто в качестве примера, использую пару ссылок, которые по умолчанию скрыты, с классами read-more и read-less, он удалит те, которые переполнению не нужны, и удалит тело классы переполнения
источник
Если вы хотите сосредоточиться на каждом, что
letter
вы можете сделать так, я обращаюсь к этому вопросуПоказать фрагмент кода
Если вы хотите сосредоточиться на каждом,
word
вы можете сделать так + пробелПоказать фрагмент кода
Если вы хотите сосредоточиться на каждом из них,
word
вы можете сделать это + без пробелаПоказать фрагмент кода
источник
Базовый пример кода, научиться писать легко. Проверьте стиль CSS комментариев.
источник
Я искал вокруг этого, но потом я понимаю, черт возьми, мой сайт использует php! Почему бы не использовать функцию обрезки при вводе текста и играть с максимальной длиной ....
Вот возможное решение для тех, кто использует php: http://ideone.com/PsTaI
источник