Word wrap break word не работает
Обновлено: 08.07.2024
Я не могу заставить перенос слов работать с этим примером .
Я вспомнил, как читал, что нужно было указать макет (что я и сделал), но помимо этого я не уверен, что мне нужно сделать, чтобы это работало. Мне бы очень хотелось, чтобы это работало в Firefox. Спасибо.
РЕДАКТИРОВАТЬ: сбой в Chrome 19 и Firefox 12, он работает в IE8. Я пробовал doctype strict и transitional, ни один из них не работал.
Mozilla Firefox решение
К стилю вашего td .
Браузеры на основе Webkit ( Google Chrome , Safari , . )
К стилю вашего td .
Примечание : Имейте в виду, что на данный момент break-word не является частью стандартной спецификации webkit; поэтому вам может быть интересно использовать вместо этого break-all . Это альтернативное значение обеспечивает, несомненно, радикальное решение; однако он соответствует стандарту.
Opera решение
К стилю вашего td .
Предыдущий абзац аналогичным образом относится и к Opera.
word-wrap собственность работает с display:inline-block :
- word-break: normal|break-all|keep-all|break-word|initial|inherit;
Простой ответ на ваши сомнения: используйте выше и убедитесь, что white-space: nowrap нигде не используется.
ПРИМЕЧАНИЕ ДЛЯ ЛУЧШЕГО ПОНИМАНИЯ:
word-wrap / overflow-wrap используется для разрыва слов, которые переполняют свой контейнер
Свойство word-break разбивает все слова в конце строки, даже те, которые обычно переносятся на другую строку и не переполняют свой контейнер.
word-wrap является исторической и нестандартной собственностью. Он был переименован в overflow-wrap , но остается псевдонимом, браузеры должны поддерживать его в будущем. Многие браузеры (особенно старые) не поддерживают overflow-wrap и требуют word-wrap в качестве запасного варианта (который поддерживается всеми).
Если вы хотите угодить W3C, вам следует подумать о том, чтобы объединить и то, и другое в своем CSS. Если вы этого не сделаете, можно использовать только word-wrap .
почему свойство 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, что это не пытается разбить слова внутри себя и скорее пытается сделать это через пробелы, когда это уместно.
I remembered reading that a layout had to be specified (which I did), but beyond that I'm not sure what I have to do to get this to work. I really would like this to work in Firefox. Thanks.
EDIT: Failed in Chrome 19 and Firefox 12, it works in IE8. I tried doctype strict and transitional, neither worked.
6,509 10 10 gold badges 36 36 silver badges 51 51 bronze badges Yes, a doctype does not appear to work. I tried strict and transitional. this white-space comment worked for me and this should be a legitimate answer10 Answers 10
Mozilla Firefox solution
to the style of your td .
Webkit based browsers (Google Chrome, Safari, . ) solution
to the style of your td .
Note: Mind that, as for now, break-word is not part of the standard specification for webkit; therefore, you might be interested in employing the break-all instead. This alternative value provides a undoubtedly drastic solution; however, it conforms to the standard.
Opera solution
to the style of your td .
The previous paragraph applies to Opera in a similar way.
1,675 1 1 gold badge 16 16 silver badges 17 17 bronze badges This is not the same as word-wrap:break-word; With word-break:break-all "Word breaks may be inserted between any character" This is not a solution, but an alternative that works in a rather extreme way (break ALL) Not Working for Safari 5.1.7. How this can be achieved? Worked for me in Chrome, word-break:break-word worked while word-wrap:break-word did not.Use this code (taken from css-tricks) that will work on all browser
Work-Break has nothing to do with inline-block .
Make sure you specify width and notice if there are any overriding attributes in parent nodes. Make sure there is not white-space: nowrap .
8,460 5 5 gold badges 29 29 silver badges 61 61 bronze badges
This combination of properties helped for me:
to get the smart break (break-word) work well on different browsers, what worked for me was the following set of rules:
- word-break: normal|break-all|keep-all|break-word|initial|inherit;
Simple Answer to your doubt is Use above and make sure white-space: nowrap nowhere used.
NOTE FOR BETTER UNDERSTANDING:
word-wrap / overflow-wrap is used to break words that overflow their container
word-break property breaks all words at the end of a line, even those that would normally wrap onto another line and wouldn’t overflow their container.
word-wrap is the historic and nonstandard property. It has been renamed to overflow-wrap but remains an alias, browsers must support in future. Many browsers (especially the old ones) don’t support overflow-wrap and require word-wrap as a fallback (which is supported by all).
If you want to please the W3C you should consider associate both in your CSS. If you don’t, using word-wrap alone is just fine.
Почему-то мне как-то особенно «везет» на странные, неожиданные фокусы с переносом текста.
Я написала электронную книгу, и решать, как переносить строки кода в блоках — это был кошмар! Порой блок текста из-за переноса выбивался по высоте из контейнера. А одни слишком длинные ссылки чего стоили!
Вставлять дефис в месте переноса или нет? Здесь переносим, там не переносим. Тут вставляем дефис, там нет. Одно свойство ни в какую не хочет работать без другого. И почему этот горизонтальный скроллинг упорно не хочет пропадать?
/me бьется об стол
Бывает множество ситуаций, с которыми здесь можно столкнуться, требующие слегка разного подхода к оформлению стилями, так что в этой статье мы рассмотрим типичные свойства, используемые для решения таких проблем, а также пару сценариев из реальной жизни, в которых, по-моему, особенно ярко проявляются проблемы с переносом/переполнением текста.
Свойства
В конце концов при решении проблем с переносом текста остается некий типичный «список подозреваемых». Одни довольно очевидные и логичные, а другие — нет. Одни делают свое дело сами по себе, а другие не очень.
Итак, давайте взглянем.
word-wrap / overflow-wrap
Свойство word-wrap принимает в виде значений два ключевых слова: normal (по умолчанию) и break-word . Это в дополнение к трём глобальным значениям inherit , initial и unset .
По умолчанию слишком длинное слово не разрывается. Браузер не влияет на такое слово, что выглядит замечательно, пока мы не сталкиваемся с мобильными. Хотя размер контейнера может подстраиваться под слово, оно в итоге вывалится из его границ и приведёт к страшной горизонтальной прокрутке на всей странице.
В первом примере этого демо можно наглядно увидеть поведение по умолчанию:
Второй пример на этом демо включает объявление overflow-wrap: break-word; , приказывающее браузеру разбить слово перед возможным переполнением своего контейнера.
Важно заметить: в текущем черновике спецификации CSS3 Text word-wrap было заменено на overflow-wrap , но значения остались прежними. И взгляните на текущую поддержку браузерами этого изменения.
word-break
Насколько я поняла, свойство word-break нужно только для того, чтобы как-то по-особому форматировать текст на китайском, японском и корейском языках.
Я применяла word-break для разбивки длинных слов, но правильным свойством (если вы не работаете с дальневосточным текстом) будет более общее вышеупомянутое overflow-wrap .
hyphens
Свойство hyphens рассказывает браузеру, как расставлять дефис при переносе, и допускает следующие значения: none , manual и auto , которые в настоящий момент плохо поддерживаются браузерами, поэтому вам, видимо, придётся запустить FireFox.
Значение none гарантирует, что в слова никогда не будет подставляться символ переноса.
При значении manual дефис выставляется в месте переноса только при наличии указывающего на это символа. Указать это можно, вставив символ либо жёсткого, либо мягкого переноса в нужное место в разметке.
Мягкий перенос ( ­ ) делает тоже самое, но фактически не отображает дефис на экране, что, как правило, предпочтительнее.
При значении auto слова можно разбивать либо в явно указанных местах, либо автоматически, в соответствии с правилами расстановки переносов для конкретного языка, указанными в специальных файлах (если они предусмотрены в браузере). Расстановка переносов специфична для языка, и для документа нужно определять атрибут lang .
white-space
У каждого из нас есть любимые CSS-свойства, на которые можно положиться, словно на запасной выход с надписью «При аварии разбить стекло молотком», чтобы выбраться из запутанной ситуации; см. также overflow: hidden и display: none . Для меня таким свойством является white-space .
Это свойство указывает правила обработки пробельных символов (пробелы, табы, переводы строки) в элементе. Что порой может вдруг оказаться невероятно полезным, например, при отладке, или чтобы лучше контролировать содержимое ячеек таблицы.
У этого свойства бывает пять значений: normal (по умолчанию), nowrap , pre , pre-wrap и pre-line .
Взглянуть на эти свойства в действии можно в примере ниже: учитывайте добавочные пробельные символы в разметке.
По умолчанию пробельные символы схлопываются в один пробел и строки разбиваются, чтобы уместиться в контейнер; как видно в первом демо-примере, в тексте есть лишние пробелы, но они не отображаются.
nowrap (пример 2) также игнорирует дополнительные пробелы, но зато не разбивает строку текста на границах контейнера.
pre учитывает все пробельные символы в разметке, и не разбивает строки (как видно выше в примере 3).
pre-wrap (пример 4) учитывает добавочные пробелы, но заставляет строку разбиваться.
pre-line (последний пятый пример) схлопывает пробельные символы (кроме перевода строки) и принуждает «цепочку» текста умещаться в контейнер.
Строки кода в блоке
Строки кода в теге pre по умолчанию не переносятся. Это может вызвать неприятности в статьях блога и технических электронных книгах на мобильном, например.
По моему опыту, обычно решение зависит от того, на каком языке этот код, и вообще от задачи, но эти проблемы можно обойти при помощи принудительных переносов (без дефиса!) или горизонтального скроллинга. Методом проб и ошибок можно понять, какое точное сочетание свойств нужно тому или иному браузеру. Убедитесь, что значение white-space случайно не переопределилось на одно из тех, при которых пробелы схлопываются, потому что это может оказаться значимым для синтаксиса кода.
Также я нарвалась на проблемы с адаптивностью при оформлении кода для github (gist), который особенно коварен из-за того, что это table. В таких случаях я понимаю, что мне придётся применить особенное оформление для переопределения контейнера таблицы.
Многоточие со смыслом
Как по мне, CSS-объявление text-overflow: ellipsis; — какая-то шляпа. Оно очень капризное и работает только при сочетании с группой других свойств. К тому же оно применяется только к единственной строке текста, что делает его не особо полезным.
С jQuery-плагином dotdotdot можно расставить многоточие в нескольких строках текста и даже добавить в конце ссылку для продолжения чтения.
Вот быстрый примерчик:
Перенос только в строго определенном месте
Порой необходимо, чтобы слова разрывались только в строго определённых местах, где в этом есть смысл, что добавляет ещё один уровень сложности; как же сообщить эти точки разрыва браузеру?
Сделать это можно с помощью мягкого или жёсткого переносов, которые, как обсуждалось ранее, размещаются в определённом месте разметки.
Не сомневайтесь, что если мягкий дефис поддерживается в браузере, то при необходимости строка будет разрываться в тех местах, где установлен ­ .
Слишком длинные ссылки
Я постоянно сталкивалась с проблемой слишком длинных ссылок, снова, при подготовке электронной книги (да, при публикации электронной книги это буквально худшее) с множеством целых ссылок в сносках.
По умолчанию такие ссылки не разрываются и вызывают всяческие неприятности на небольших экранах. При необходимости URL’ы должны разрываться без дефиса, поскольку ссылка в таком случае будет нерабочей. Также здесь нужно быть осторожным, поскольку, если вы такое допустите, то разорвутся не только URL’ы, но и все слова.
overflow-wrap: break-word; на ссылке гарантирует, что URL разорвётся в границах контейнера и переполнения не будет, хотя добиться кроссбраузерности тут не так просто, как можно было бы подумать.
Заключение (Ха!)
Читайте также: