Сделать что бы текст не мог выходить за пределы области
Как можно сделать что бы текст не мог выходить за пределы некоторой области в ширину каким бы длинным он не был, но можно что бы область расширялась вниз. Например, имеется такое:
и CSS:
.quote_body_content
Так вот если текст внутри очень длинный без пробелов он выходит за пределы этой области на экране, как показано здесь: http://tinypic.com/view.php?pic=2j28akz&s=6 При этом ещё некоторые элементы ниже уплывают вправо за границы зоны видимости экрана. Очень некрасиво, и так как текст берётся из бд куда вводится юзерами хотелось бы предусмотреть вариант ввода юзером длинного текста без пробелов и избежать такого косяка.
par12b12
15.06.10 00:06:32 MSD
Как обрезать текст и добавить в конце многоточие?
Иногда приходится ограничивать длинный текст, к примеру, в блоке с фиксированными размерами, чтобы текст не выходил за пределы этого блока. Часто делается так: текст, который не помещается в заданные размеры, обрезается, а в конце текста добавляется многоточие. Оно подсказывает пользователю, что текст отображается лишь частично.
Способ обрезания текста зависит от длины и числа строк.
Однострочный текст
Для одной строки есть специальное свойство text-overflow со значением ellipsis , которое добавляет многоточие в конце текста. Чтобы это свойство работало, нужно соблюсти ещё два условия.
- Текст должен выводиться в одну строку без переносов. Для запрета переносов мы используем свойство white-space со значением nowrap .
- Текст за пределами блока скрывается от просмотра с помощью свойства overflow со значением hidden .
Комбинируя три свойства white-space, overflow и text-overflow получим обрезанную строку с многоточием в конце (пример 1).
Пример 1. Использование text-overflow
Результат данного примера показан на рис. 1.
Рис. 1. Вид обрезанного однострочного текста
Многострочный текст
Ограничение нескольких строк представляет собой более сложную задачу, которая потребует применения целого набора нестандартных и устаревших свойств. Нам понадобится следующее.
- Свойство -webkit-line-clamp, которое ограничивает число строк. Значение 3 отобразит три строки, значение 4 — четыре строки.
- Свойство display со значением -webkit-box .
- Свойство -webkit-box-orient со значением vertical .
- Свойство overflow со значением hidden , оно скрывает текст за пределами блока.
Заметьте, что в большинстве случаев мы имеем дело не со стандартными стилевыми свойствами, а добавляем к ним префикс -webkit-. При этом все эти свойства с префиксами работают даже в Firefox.
Свойство display: -webkit-box в настоящий момент устарело, при вёрстке сейчас используется display: flex . Аналогично устарело и -webkit-box-orient: vertical , сейчас вместо него применяется flex-direction: column . При этом нельзя просто заменить устаревшие свойства современными, перестанет работать ограничение строк.
Также есть проблема и с высотой блока — при добавлении padding его значение прибавляется к высоте строк, в итоге отображается часть лишней строки. Чтобы этого избежать можно явно задать высоту блока или вложить один блок внутрь другого. В примере 3 свойство padding применяется к , а набор свойств для ограничения текста к
.
Пример 2. Использование -webkit-line-clamp
Результат данного примера показан на рис. 2.
Рис. 2. Вид обрезанного многострочного текста
Обратите внимание, что здесь нам не нужен text-overflow, многоточие добавляется через свойство -webkit-line-clamp.
Использование JavaScript
Если не хочется связываться с устаревшими свойствами, всегда можно воспользоваться JavaScript для решения нашей задачи. Библиотека Clamp.js позволяет выбрать алгоритм работы — с помощью -webkit-line-clamp , в этом случае применяется набор свойств из примера 2 или путём явного обрезания строки (пример 3).
Пример 3. Использование Clamp.js
Обратите внимание на параметр useNativeClamp . По умолчанию его значение равно true , в этом случае к элементу добавляется свойство -webkit-line-clamp . Если же указать значение false , тогда строка обрезается явно. Между этими алгоритмами Clamp.js есть небольшая разница, заметная при изменении размера окна браузера. Использование useNativeClamp:true обрезает строку лишь при необходимости, когда она превышает три строки. useNativeClamp:false обрезает всегда и при изменении размеров блока строка так и остаётся обрезанной.
Как сделать так, чтобы текст не выходил за границу блока в высоту?
Вот скрин того как себя ведет сделанный мной блок, схема блока проста:
текст
Для блока задал такие стили: (если что это less: p внутри не ошибка — это дочерний элемент)
.desc < margin-top: 5px; height: 150px; p < height: 100px; text-overflow: flip; >>Как исправить чтобы все правильно отображалось и текст выходящий за 150px высоту обрезался с text-overflow?
- Вопрос задан более трёх лет назад
- 7631 просмотр
как сделать что бы текст не выходил за пределы бокса?
Когда внутри бокса делаешь так
111111111. и так еще много 1
текст выходит за пределы бокса и за пределы сайта. Как сделать так, что бы когда текст доходит до пределов бокса переходил бы на новую строку?
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как сделать, чтобы span выходил за пределы div
Добрый день! Нужно вывести тултип при наведении на текст, но он обрезается границами div, как.
Как сделать, чтобы фиксированный текст не выходил за верхнюю и нижнею границы
Доброго времени суток, гуру верстки! Подскажите, во по какому вопросу. Есть вот такая.
Как сделать, чтобы текст не выходил за рамки, а переносился на следующую строку?
Помогите, как сделать что бы текст не выходил за рамки, а переносился на следующую строку ?
Как можно сделать, чтобы при нажатии на кнопку ( Символ-Button) выходил текст в текстовое поле
Как можно сделать, чтобы при нажатии на кнопку ( Символ-Button) выходил текст в текстовое поле .