Css word wrap break word не работает

CSS word-wrap: break-word не работает на IE9

9 ответов

так, это в вашем случае по существу.

другой пост также предлагает применить word-break:break-all и word-wrap:break-word к нему.

Я удаляю тег anchor после .tab_title класс и он работает

word-wrap: word-break; работает только в ff и chrome, а не в IE8 и IE9.
word-break: break-all; не работает.

для меня он работал как в Chrome, так и в IE с:

как это не нужно настраивать определенную ширину.

у меня был хороший успех в Chrome, Firefox и IE с использованием:

в моем проблемном случае я использовал:

и мне пришлось включить

чтобы получить обертывание во всех браузерах. В большинстве случаев максимальная ширина не требовалась. Используя

не работает хорошо в IE, потому что, хотя длинные слова без пробелов будут обернуты, короткие слова также перестанут оборачиваться в пробелы.

недавно я боролся с этим в Angular между IE / Edge & Chrome. Вот то, что я нашел, работало для меня

Это дало мне лучшее из обоих. Это нарушило бы слово, которое было слишком длинным, но в отличие от word-break оно не нарушило бы середины слова.

Я только что понял, что word-wrap: break-word работает только частично в IE8 и IE9. Если у меня есть строка слов с пробелами,то эта строка будет обернута. Но если моя строка состоит из одного длинного слова, она заставляет Родительский/контейнерный элемент расширяться в соответствии с его шириной

Источник

Почему word-wrap не работает должным образом в CSS3?

почему свойство word wrap не работает должным образом в приведенном ниже примере?

что я могу сделать, чтобы убедиться, что часть слова «consectetur» вписывается в первую строку? Я хочу, чтобы максимальное количество символов соответствовало каждой строке.

6 ответов

использовать 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, и она будет запускаться каждый раз, когда окно повторно размер.

функция проверяет, имеет ли элемент больше ширины, чем его родитель, и если он имеет, он разбивает все вместо слов только. Мы же не хотим, чтобы дети выросли больше, чем родители, верно?

мне это нужно только для таблиц, поэтому, если вы хотите его в каком — то другом элемент, просто измените «table» на » #yourId «или».в yourclass». Убедитесь, что есть parent-div или измените «div» на «body» или что-то еще?

если он перейдет в 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, что это не пытается разбить слова внутри себя и скорее пытается сделать это через пробелы, когда это уместно.

Источник

css word-wrap: break-word won’t work

I have two inline span. code sample:

And scss sample:

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:

Источник

word-wrap break-word does not work in this example

I cannot get word-wrap to work with this example.

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.

10 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.

Firefox: The inline block approach causes the

‘s to be stacked, which isn’t what I wanted. The break-all as described in the next answer works very well.

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 .

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:

• inline-block is of no use in this scenario

• 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.

Источник

Где всё сложно с переносами строк. Вот все CSS- и HTML-хитрости для этого

Скажем, есть действительно длинное слово в каком-то тексте, у контейнера которого недостаточно ширины для него. Типичная причина этого — длинный URL, просочившийся в текст. Что происходит? Зависит от CSS. Как этот CSS управляет раскладкой и как он этим текстом распоряжается.

Вот как может выглядеть ситуация с не поместившимся текстом:

Текст, вылезающий из бокса — визуальная проблема.

Первое решение — overflow: hidden; , как этакий «лобовой» прием, чтобы не дать тексту (и чему угодно) высовываться. Но от этого пострадает доступность текста. В некоторых десктопных браузерах для выделения текста можно три раза кликнуть на нем мышью, но не каждый может об этом знать и не всегда такое возможно.

Название свойства « overflow » — «переполнение» — здесь весьма к месту, ведь именно оно, переполнение, у нас и происходит. Ещё есть overflow: auto; , приводящее к горизонтальному скроллу. Иногда может и подойди, но наверняка вы тоже согласитесь, что обычно это решение неприемлемо.

Нам нужно, чтобы этот зараза длинный URL (или любой текст) разорвался, чтобы перенестись на следующую строку. Варианты есть! Для начала подготовим место, где мы будем со всем этим разбираться.

Экспериментальная площадка

Здесь я взял блок с содержимым, размер которого можно менять, и решил соединить его с разными CSS-свойствами и их значениями, которые можно включать/выключать, чтобы увидеть, как это влияет на содержимое.

Уверен, что этот список неполный и не идеальный. Это лишь некоторые из знакомых мне свойств.

Кувалда: word-break: break-all;

Позволяет словам разрываться везде. Свойство word-break «решает» проблему:

В переписке по электронной почте fantasai пояснила, что это работает, поскольку свойство word-break меняет определение того, что считать словом. Значение break-all по сути воспринимает любой текст как восточноазиатский, который может переноситься практически где угодно (кроме точек в конце предложений и закрывающих скобок). Значение keep-all , наоборот, воспринимает восточноазиатские иероглифы как буквы в слове, а не как целые слова.

Прицельное решение: overflow-wrap: break-word;

Свойство overflow-wrap кажется наиболее эффективным решением для данной проблемы.

На первый взгляд это может походить на демо с word-break: break-all; выше, но заметьте, как в URL оно не разрывает «pen» как «pe\n», а делает перенос в конце этого слова, рядом со слешем.

Если слово не может разорваться, переполняя контейнер, оно может разорваться где угодно во избежание переполнения.

Решение потяжелее, иногда: hyphens: auto;

Свойство hyphens может иногда решить проблему с URL-адресами и длинными словами, но это не точно. На длинном числе, например, он споткнется. Вдобавок, hyphens влияет на весь текст, позволяя себе вольности в разрывах ради того, чтобы сделать правый край текста более ровным.

fantasai сказала мне:

Если «слово» находится в конце строки, его можно переносить через дефис.

Думаю, это «слово» в кавычках дает подсказку, в чем тут проблема. Некоторые неприемлемо длинные строки — не «слова», поэтому это решение — не панацея.

Будущая кувалда: line-break: anywhere;

Есть свойство line-break . В основном, кажется оно для пунктуации, но ни в одном браузере оно у меня не заработало. fantasai сказала мне, что появится новое значение anywhere , которое:

«как word-break: break-all; » за исключением того, что она на самом деле разрывает всё, как примитивная программа на терминале.

Другие решения в HTML

Элемент
разобъёт строку где угодно, если только у него не будет display:none .

Элемент — «возможный разрыв слова», что означает, что длинному слову, обычно вызывающему раздражающую проблему с переполнением можно сказать, чтобы оно разорвалось в конкретном месте. Полезно! Оно ведёт себя, как пробел нулевой ширины.

Другие решения на CSS

Символ ­ ­ делает то же самое, что и элемент (На самом деле не совсем, поскольку, в отличие от , ­ добавляет дефисы при переносе. — прим. перев.)

Можете вставить разрыв строки с помощью псевдоэлемента ::before < content: "\A"; >, если только элемент не строчный (в противном случае потребуется white-space: pre; )

P.S. Это тоже может быть интересно:

Если вам понравилась статья, поделитесь ей!

Источник