Css word wrap не работает
Обновлено: 07.07.2024
почему свойство word wrap не работает должным образом в приведенном ниже примере?
что я могу сделать, чтобы убедиться, что часть слова "consectetur" вписывается в первую строку? Я хочу, чтобы максимальное количество символов соответствовало каждой строке.
использовать word-break: break-all;
Если word-wrap: break-all не работает, попробуйте добавить это:
работы для меня .класс btn в Bootstrap 3
он не переносится должным образом, потому что браузеры не применяют автоматические переносы (что было бы способом вызвать правильный wrapping) по умолчанию. Вам нужно использовать перенос CSS или перенос на основе JavaScipt. Настройка word-wrap:break-word , а также word-break: break-all по определению разрывы слова (разбивает их на куски s в arbit rary poin ts), вместо правильной упаковки.
поскольку CSS word-wrap не работает во всех браузерах, используйте JavaScript вместо этого! Это должно дать тот же результат.
функция ниже требует JQuery, и она будет запускаться каждый раз, когда окно повторно размер.
функция проверяет, имеет ли элемент больше ширины, чем его родитель, и если он имеет, он разбивает все вместо слов только. Мы же не хотим, чтобы дети выросли больше, чем родители, верно?
если он перейдет в else, он изменится на Word-break, а затем проверьте, должен ли он измениться обратно, вот почему так много кода.. :'/
Я надеюсь, что это работает для вас!
это полезно для упаковки текста в одну строку:
хорошо, поэтому я знаю, что это старый вопрос, но я серьезно думаю, что может быть какое-то полезное разъяснение того, когда использовать какое свойство. Глядя на существующие ответы, я чувствую, что они предлагают решения без объяснений, поэтому вот моя попытка помочь с этим. Для контекста по умолчанию контейнер не будет пытаться разбить одно длинное слово, потому что он хочет сохранить слово в его исходной форме.
С учетом сказанного, 3 основных способа расстаться слова там is overflow-wrap , word-break и hypens . Я не буду слишком глубоко погружаться в hypens.
Итак, во-первых. я вижу word-wrap используется в вопросе, но чтение документации, которая устарела, и некоторые браузеры решили просто псевдоним его overflow-wrap . Наверное, лучше не использовать это.
различие между двумя свойствами довольно ясно в документации, но для ясности, overflow-wrap действительно имеет только два возможных значения и обнаружить, если слово было переполнено. Если это так, по умолчанию он перемещает все слово в следующую строку. Если break-word установлен, он будет разбивать слово только в том случае, если все слово не может быть помещено на эту строку.
вы можете увидеть pneumonoul. длинное слово ломается именно там, где ему нужно, на следующей строке после попытки отделить длинное слово.
сейчас в контраст, мы имеем word-break . Это имеет более зернистые свойства и на самом деле также имеет . Это синоним вышеуказанного фрагмента, поэтому, когда использовать тот или иной, я думаю, довольно тривиально.
, word-break предлагает break-all значение, которое будет нарушать слово, когда это возможно, чтобы соответствовать слову, где оно изначально предназначалось. Он не пытается выяснить, нужно ли ему слово, чтобы быть на новой линии или нет-он просто толкает разрыв линии, где он переполняется. Этот самое большое отличие здесь от вышеизложенного заключается в том, что длинное слово, которое мы используем, все еще находится наверху.
и, наконец, для hyphens имеют свой собственный особый способ разбивания слов. Для получения дополнительной информации взгляните на документация. Также стоит отметить, что разные языки имеют разные способы разбиения слов, но, к счастью, hyphens свойство крючки в lang атрибут и понимает, что делать.
другой вариант, который предложили люди, использует white-space свойство, которое пытается разбить текст через помещения. В Примере, который я использовал, это не помогает нашей ситуации, потому что само слово длиннее контейнера. Я думаю, что важно отметить об этом свойстве CSS, что это не пытается разбить слова внутри себя и скорее пытается сделать это через пробелы, когда это уместно.
If my expected view has to be:
If user enters string without spaces, string won't break. And breaks design:
How properly break long words ??
6 Answers 6
white-space: nowrap will prevent word-break from taking effect. Some templates apply white-space: nowrap which necessitates overriding this attribute with white-space: normal .
To properly break long-words it requires to combine several CSS properties, I would suggest defining and applying helper class like this:
- overflow-wrap and word-wrap are aliases for same thing but some browsers support one and not the other so we need them both. They are offical "correct" way to break words but they don't have any effect on elements with dynamic width so we need more.
- word-break is originally intended for requiring a particular behaviour with CJK (Chinese, Japanese, and Korean) text but works similar to word-wrap but in WebKit break-all value breaks everything and everywhere. For that reason we must use non-standard and poorly documented WebKit-only break-word value.
- and optionally, if it makes sense for break words to have hypens (ie. for URLs it probably doesn't) we can use hypens in browsers that support them (at the moment Firefox, Safari, Edge and IE 10+). Also note that in Firefox hypens don't work if you have word-brake property so unless you have fixed-width container you must choose between hypens on FF or legacy support.
Note that I omitted vendor prefixes but if you don't use something like Autoprefixer than this is full verison:
Я написал электронную книгу, и это был сущий кошмар, когда мне приходилось сталкиваться с CSS переносом текста внутри блоков кода. Иногда высота блока текста выше, чем контейнера. Иногда проблемы возникали из-за длинных URL-адресов :
В этой статье мы рассмотрим стандартные свойства, используемые для решения таких проблем, и приведем несколько сценариев, которые иллюстрируют особенно сложные случаи переноса текста.
Свойства
Давайте бегло рассмотрим основные свойства.
Свойство word-wrap принимает два значения: normal ( по умолчанию ) и break-word . Это не считая трех глобальных значений: inherit , initial и unset .
По умолчанию особенно длинное слово не будет разрываться. При CSS переносе текста на новую строку браузер сохраняет это поведение, пока дело не доходит до просмотра текста на смартфоне. Контейнер слова может быть адаптивным, а само слово будет вываливаться за его границы, что приведет к появлению горизонтальной прокрутки по ширине страницы.
В первом примере показано поведение по умолчанию для таких случаев:
Второй пример этой демо-версии иллюстрирует действие свойства overflow-wrap: break-word , которое указывает браузеру разрывать слово, когда оно выходит за пределы контейнера.
Важно отметить : в текущей версии спецификации по текстам CSS3 свойство word-wrap было заменено на overflow-wrap , которое принимает те же значения. Здесь вы найдете обзор поддержки браузерами этого нового свойства .
Свойство word-break предназначено только для требующих определенного поведения языков ( китайского, японского и корейского ).
Я обычно использовал его для CSS переноса длинных слов, но, если речь не идет о не выше перечисленных языках, то лучше использовать свойство overflow-wrap, о котором я только что рассказал.
Свойство hyphens указывает браузеру, как обрабатывать переносы слов с добавлением дефисов. Оно принимает следующие значения: none , manual и auto . Это свойство на данный момент поддерживается браузерами не полностью, поэтому будет работать нормально только в Firefox .
Значение none задает поведение, при котором дефисы никогда не будут добавляться в слова при разрыве строк.
При использовании значениия manual слова будут разрываться при разрыве строк только на символах, которые указывают это. В разметку добавляются специальные теги, на которых при необходимости переносятся слова.
Тег ­ задает мягкий CSS перенос текста на новую строку – он указывает разрыв слова, если это необходимо, но дефис на экране отображается только, если слово переносится.
Значение auto указывает, что слова могут разрываться в определенных местах или автоматически согласно разрешениям, указанным в ресурсах для конкретных языков ( если они предоставляются браузером ). В этом случае переносы будут зависеть от конкретного языка, и для документа должен быть указан атрибут lang .
Я предпочитаю использовать свойство white-space . Оно определяет, как пробелы, отступы табуляции, принудительные разрывы строк обрабатывается внутри элемента. Оно может оказаться чрезвычайно полезным для устранения неполадок и получение большего контроля над содержимым ячейки таблицы.
Свойство принимает пять значений: normal ( по умолчанию ), nowrap , pre , pre-wrap и pre-line .
Приведенная ниже демо-версия иллюстрирует все эти значения в действии; учитывайте дополнительные промежутки, включенные в разметку.
При CSS переносе текста в блоке по умолчанию пустые пространства объединяются и строки разрываются, чтобы соответствовать размерам контейнера. Это показано в первом примере, где в текст добавлены дополнительные пробелы, но при отображении они не выводятся.
Значение nowrap ( пример 2 ) также не воспринимает дополнительные пробелы, но в отличие от normal строки текста не переносятся в соответствии с размерами контейнера.
pre поддерживает дополнительное пробелы в разметке и не разрывает строки при выходе за пределы контейнера, как показано в примере 3.
Пример 4, pre-wrap не объединяет пустые пространства, но переносит строки при выходе за пределы контейнера.
Значение pre-line объединяет пробелы ( за исключением символов перехода на новую строку ) и разрывают текст, чтобы он соответствовал границам контейнера, как показано в последнем примере.
Блоки кода
По умолчанию блоки кода оборачиваются в теги pre и не переносятся. Это может привести к большой путанице.
По личному опыту могу сказать, что решение этой проблемы зависит от конкретного языка. И она может быть решена с помощью принудительных CSS переносов текстов по словам ( без дефисов ) или горизонтальной прокрутки.
Убедитесь, что все установленные значения white-space не приводят к объединению пустых пространств и пробелов, иначе это нарушит синтаксис кода.
Я также столкнулся со сложностями, связанными с адаптацией кода при структурировании верстки из-за использования таблиц. В таких случаях я применяю специальный стиль для контейнера таблицы, чтобы переопределить его поведение.
Многоточия, которые имеют значение
CSS text-overflow: ellipsis является неудобным. Оно требует добавления большого количества кода, так как работает только в сочетании с кучей других свойств. Кроме этого, оно действует только на одну строку текста, что делает его еще более неудобным.
Есть JQuery-плагин , dotdotdot , который создает многоточие. С его помощью можно добавить даже ссылку в конце для продолжения чтения.
Вот пример его применения:
Супер специфические расположения разрывов
Иногда нужно, чтобы слова разрывались, но только в очень специфических местах. Это делает все еще сложнее. Как нам сообщить браузеру, что в этих местах нужно добавлять CSS перенос текста ?
Это достигается за счет использования мягкого или твердого переноса с помощью дефисов, который мы рассматривали ранее. При необходимости строка будет разрываться в местах, где добавлены теги ­:
Слишком длинные ссылки
Когда я готовил к выходу свою электронную книгу, мне неоднократно приходилось сталкиваться с проблемой слишком длинных ссылок.
По умолчанию они не разрываются, и это приводит к некорректному отображению на небольших экранах. URL-адрес нужно разрывать, когда это необходимо, но без дефисов, чтобы ссылка осталась рабочей. Также нужно быть очень осторожным при применении CSS переносов . Если вы сделаете что-то неправильно, разрываться будут не только URL-адреса , но и любые слова.
Применив overflow-wrap: break-word к ссылке, вы зададите разрыв URL-адреса при ее выходе за пределы контейнера, хотя это свойство поддерживается не во всех браузерах.
Заключение
Задать правильное сочетание свойств для решения проблемы переноса может оказаться непростой задачей. Но попрактиковавшись и проанализировав свои ошибки, вы сможете найти верное решение:
Пожалуйста, оставляйте ваши мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, дизлайки, подписки, лайки, отклики!
Труднопереносимыми бывают не только люди, но и слова. К примеру, химическое соединение метилпропенилендигидроксициннаменилакрилическая кислота очень похожа на некоторых людей с « подвывертом »! Не знаем, как справляться с такими трудными личностями, но реализовать перенос текста CSS точно поможет.
Зачем переносить «непереносимое»
В большинстве случаев при отображении текстового содержимого веб-страниц в браузере перенос слов не применяется. Если слово не вмещается целиком в область экрана, то по умолчанию оно полностью « переезжает » на следующую строчку.
Частичный перенос применяется лишь к длинным и сложным словам, состоящим из нескольких терминов и разделенных дефисом. Вот тут и возникают проблемы отображения этих слов на разных по диагонали экранах и в разных браузерах. При этом точно предугадать, как длинное слово будет « выглядеть » на клиентской стороне трудно, поэтому задавать переносы « вручную » бессмысленно:
Решаем проблему переноса слов с помощью HTML
Перед тем, как рассмотреть CSS перенос слов , изучим возможности решения этой проблемы с помощью языка гипертекста.
Для этого в HTML имеется несколько вариантов:
Как реализовать CSS перенос слов
Перед тем, как реализовать CSS перенос слов , давайте рассмотрим несколько свойств, способных разрешить основную проблему:
- word-wrap – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии word-wrap в коде будут выдавать ошибку:
Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. word-wrap принимает следующие значения:
- normal – слова не переносятся;
- break-word – автоматический перенос слов;
- inherit – наследование значения родителя.
Пример, иллюстрирующий применение этого свойства:
В новой спецификации CSS свойство word-wrap было переименовано в overflow-wrap . Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, поэтому лучше использовать старую версию свойства:
Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome , но не поддерживается в IE . Поэтому overflow-wrap лучше не использовать того чтобы реализовать CSS перенос слов .
- word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3 . Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.
Свойство принимает три значения:
- normal – используются правила переноса, установленные по умолчанию;
- word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
- keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.
hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:
- none – отключает CSS перенос слов;
- manual ( значение по умолчанию ) – слова переносятся в тех участках текстового блока, где это задано с помощью тега <wbr> или мягкого переноса () ;
- auto – браузер автоматически переносит слова на основе своих настроек.
Свойство поддерживается последними версиями IE , Opera и Firefox . Для каждого из них прописывается своя строчка CSS . Hyphens не поддерживается Google Chrome . Пример:
Как реализовать запрет переноса слов CSS
Иногда нужно сделать так, чтобы строка отображалась полностью без разрыва. Запрет использовать CSS перенос слов можно реализовать несколькими способами:
- С помощью неразрывного пробела   , который устанавливается в местах переноса строки или слов;
- Задав свойству white-space значение « nowrap » ( white-space: nowrap ).
Теперь вы сможете переносить с помощью CSS даже самые длинные слова. Но вот с проблемой труднопереносимых людей вам придется разбираться самостоятельно. Попробуйте воздействовать на них методами CSS – может и получиться, хотя мы сами не проверяли.
Читайте также: