как сделать так чтобы текст не выходил за границы блока html
Почему длинное слово выходит за границы блока?
2 ответа 2
Это одно слово. По умолчанию оно не разбивается на части внутри блока.
Сначала ссылка на спецификацию.
Теперь мой примерный перевод:
В большинстве систем письменности при отсутствии явных переносов система мягких переносов срабатывает только на границах слов. Многие из этих систем используют пробелы и знаки препинания, чтобы явно разграничить слова. Возможность мягкого переноса может быть определена по этим признакам.
Исправить можно несколькими способами:
Мягкий перенос
Лучше всего указать браузерам, как переносить длинные слова, не полагаясь на автоматические средства. Сделать это можно с помощью мягкого переноса.
Чтобы набрать его можно использовать мнемонику ( ) или ввести alt + 0173 на клавиатуре (цифры набирать по одной, не отпуская alt ).
Внимание: невозможно использование более 5 мягких переносов в одном слове.
Проверено в последней бете Yandex.Browser.
Пробел с нулевой длиной
ZERO-WIDTH SPACE — показывает места, в которых можно разрывать строку, не добавляя знак переноса; ширина его нулевая. Применяется в языках, в которых пробелов нет. При выравнивании текста по ширине может расширяться, как и любой другой пробел.
Внимание: невозможно использование более 5 пробелов нулевой длины в одном слове.
Проверено в последней бете Yandex.Browser.
Элемент
Тег указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.
Внимание: невозможно использование более 5 элементов в одном слове.
Проверено в последней бете Yandex.Browser.
CSS-свойство word-wrap
Свойство word-wrap указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область. Данное свойство носит черновой характер и при валидации документа на CSS3 выдает ошибку.
break-word — Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока.
CSS-свойство overflow
Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
auto — Полосы прокрутки добавляются только при необходимости.
При ответе использована информация из ответов к вопросу: «How to prevent long words from breaking my div?»
Как убрать текст, что выходит за границы блока?
Задача заключаеться в том что нужно убрать перенос! Блок в котором лежит заголовок имеет высоту 28px и ширину 100%. Пробовал сделать через white-space: nowrap; но при сжатии, блок с заголовком «лезет» на изображение. Каркас делаю flexbox‘ами. Поэтому если знаете решение с их использованием, будет очень кстати! 
1 ответ 1
line-height: 28px; overflow: hidden;
Если у вашего блока есть псевдоэлементы ::before или ::after, то учтите, что их тоже спрячет overflow
Всё ещё ищете ответ? Посмотрите другие вопросы с метками css flexbox width или задайте свой вопрос.
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.11.26.40833
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Доброго времени суток.
Нет комментариев в правой стороне, а название рубрики (рубрик) в левой. Дизайн сайта резиновый. Что надо прописать, чтобы при подходе названия рубрики(рубрик) к Нет комментариев не происходило переноса последнего на новую строку, а название самой рубрики сокращалось многоточием.
Если это изобразить на картинке, то вот так:
1 ответ 1
Первым делом, не забывайте, что любой «резиновый» дизайн все равно должен иметь минимальную ширину, после которой он либо перестает сужаться, либо меняет свой внешний вид под мобильные устройства. По сути вопроса, у вас есть два варианта, как решить задачу с обрезанием текста.
Вариант 1: решение на стороне бекенда
Тут все достаточно просто. В зависимости от того, какой язык вы используете, вы обрезаете название рубрики таким образом, чтобы оно влезало в ваше поле. Например, код на php:
Вариант 2: решение на стороне фронтенда
Тут может быть несколько подвариантов.
Как видите, решается достаточно просто, но нет проверки на знаки препинания, не убрать последний пробел, да и вообще разные браузеры по-разному поддерживают css.
Второй подвариант более оптимален. С одной стороны, он похож на первый вариант решения, на стороне бекенда, с другой стороны, он более гибок, так как позволяет обрезать текст динамически, в зависимости от размера экрана пользователя и соответственно в зависимости от ширины блока, где должен оказаться текст.
Самый простой вариант, когда у вас не будет определения необходимой длины, это:
Как обрезать элемент на CSS (свойства overflow, text-overflow и clip)
По умолчанию если в заданные размеры содержимое блока не помещается, то оно отображается поверх него.
CSS свойство overflow
overflow и position: absolute;
Элемент с position: absolute; перемещается в рамках другого элемента с position, отличного от static. То есть родитель с overflow: hidden; и position: static; не будет обрезать содержимое потомка с position: absolute; или position: fixed.
Полоса прокрутки (scrollbar) и position: fixed;
Полоса прокрутки, принадлежащая тегу html, не перекрывается элементом с position: fixed. Это является проблемой для модального окна, распахнутом на весь экран. Решение просто как две копейки: нужно убрать прокрутку у html и добавить при необходимости прокрутку у body.
CSS свойство text-overflow: закончить многоточием
При overflow не в значении visible текст становится не читаемым, обрезаясь на полуслове. Особенно, если его перенос на другую строку запрещён благодаря white-space в значении nowrap. В этом случае можно обозначить, что часть слов убрана и повествование не закончено, воспользовавшись свойством text-overflow.
CSS свойство clip
Только для элементов, которым задан position: absolute;. Единицы измерения можно выбрать px, em и т.п., но не проценты.
6 комментариев:
some_class:
| First line,
| second line
| and more
.soome_class <
font-size: 1em;
height: 2em;
overflow: hidden;
>
NMitra Установите height, равную высоте двух строк. height двух строк = line-height * 2
Запретить выходить блоку за границы родительского блока.
Подробно о выходе блоков за пределы родительского блока.
Блок выходит за пределы родительского блока.
Пример блока выходящего за пределы блока:
Если вы прочитали стили, то вы увидели, что наш дочерний блок выходит по ширине за пределы родительского блока на 100px(см. padding 0 50px)
И чтобы вот этот выход за пределы бока ликвидировать, то к классу «second» добавим «box-sizing: border-box;»
нам опять понадобится два div
Стили. смотри выше пунктом. для данного примера они аналогичные.
Если мы приведем данный пример выхода за пределы родительского блока, то увидим абсолютно аналогичную историю, что и в первом пункте:
И далее.. второму блоку присвоим свойство display со значением table-cell
Блок больше не выходит за пределы родительского блока:
Textarea выходит за пределы блока.
Ну как-же этот долбаный «Textarea» вылазит за пределы. что только не придумывай.
Стряхнув с себя пелену сапожника. пора было решить эту задачку навсегда!
Давайте приведем пример «Textarea», который вылазит за пределы родительского блока.
.first <
background: #6cd81c;
width: 300px;
height: 50px;
>
.first textarea <
width: 100%;
padding: 0 20px;
>
Выход картинки за пределы родительского блока.
Далее. картинка выходит за пределы блока.
Для примера нам понадобится div в который поместим img с адресом.
Возьмем этот же пример и зададим нашей картинке «style=»max-width: 100%»»
Чтобы картинка не заходила за пределы блока по высоте, то применяем