Сделать что бы текст не мог выходить за пределы области
Как можно сделать что бы текст не мог выходить за пределы некоторой области в ширину каким бы длинным он не был, но можно что бы область расширялась вниз. Например, имеется такое:
и CSS:
.quote_body_content
Так вот если текст внутри очень длинный без пробелов он выходит за пределы этой области на экране, как показано здесь: http://tinypic.com/view.php?pic=2j28akz&s=6 При этом ещё некоторые элементы ниже уплывают вправо за границы зоны видимости экрана. Очень некрасиво, и так как текст берётся из бд куда вводится юзерами хотелось бы предусмотреть вариант ввода юзером длинного текста без пробелов и избежать такого косяка.
par12b12
15.06.10 00:06:32 MSD
Как сделать, чтобы текст не выходил за див?
word-wrap: break-word; рaботает идеально, даже если 1000 букв подряд.
Отслеживать
51.6k 201 201 золотой знак 65 65 серебряных знаков 246 246 бронзовых знаков
ответ дан 16 дек 2017 в 21:50
user278197 user278197
Скажите, а возможно добавлять тире на место переноса?
22 сен 2019 в 21:22
word-wrap: break-word; не работает у меня (
5 фев 2020 в 23:19
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Если в тексте не будет пробелов то текст всегда будет выходить за рамки! Это факт! А если с пробелами напишешь то все будет гуд.
тогда текст который будет выходить за пределы div показываться не будет, а иначе «Текст без пробелов не переносится, это такое правило.»
text-overflow
Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto , scroll или hidden .
Синтаксис
text-overflow: clip | ellipsis
Значения
clip Текст обрезается по размеру области. ellipsis Текст обрезается и к концу строки добавляется многоточие.
HTML5 CSS3 IE Cr Op Sa Fx
text-overflow
Результат данного примера показан на рис. 1.
Рис. 1. Многоточие в конце текста
Браузеры
Opera с версии 9.0 до версии 11.0 использует нестандартное свойство -o-text-overflow .
Как обрезать текст и добавить в конце многоточие?
Иногда приходится ограничивать длинный текст, к примеру, в блоке с фиксированными размерами, чтобы текст не выходил за пределы этого блока. Часто делается так: текст, который не помещается в заданные размеры, обрезается, а в конце текста добавляется многоточие. Оно подсказывает пользователю, что текст отображается лишь частично.
Способ обрезания текста зависит от длины и числа строк.
Однострочный текст
Для одной строки есть специальное свойство 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 обрезает всегда и при изменении размеров блока строка так и остаётся обрезанной.