Css word wrap не работает
text-overflow:ellipsis; работает, только если выполняются следующие условия:
- Ширина элемента должна быть ограничена в px (пикселях). Ширина в % (в процентах) не подойдет.
- В элементе должны быть установлены overflow:hidden и white-space:nowrap .
Причина, по которой у вас здесь проблемы, заключается в том, что width вашего элемента a не ограничен. У вас есть параметр width , но поскольку элемент установлен на display:inline (т. Е. По умолчанию), он игнорирует его, и ничто другое также не ограничивает его ширину.
- Установите для элемента значение display:inline-block или display:block (возможно, первое, но зависит от требований вашего макета).
- Установите для одного из элементов контейнера значение display:block и присвойте этому элементу фиксированный width или max-width .
- Установите для элемента значение float:left или float:right (возможно, первое, но опять же, любое из них должно иметь тот же эффект, что и многоточие).
Я бы посоветовал display:inline-block , так как это окажет минимальное побочное влияние на ваш макет; он работает очень похоже на display:inline , который он использует в настоящее время, что касается макета, но не стесняйтесь экспериментировать и с другими пунктами; Я постарался дать как можно больше информации, чтобы помочь вам понять, как эти вещи взаимодействуют друг с другом; Большая часть понимания CSS - это понимание того, как различные стили работают вместе.
Вот фрагмент вашего кода с добавленным display:inline-block , чтобы показать, насколько вы были близки.
Принятый ответ потрясающий. Однако вы все равно можете использовать ширину % и получить text-overflow: ellipsis . Решение простое:
Кажется, что всякий раз, когда вы используете calc , окончательное значение отображается в абсолютных пикселях, что последовательно преобразует 80% во что-то вроде 800px для контейнера шириной 1000px . Поэтому вместо использования width: [YOUR PERCENT]% используйте width: calc([YOUR PERCENT]%) .
Поэтому, если вы столкнулись с этим вопросом, потому что у вас возникли проблемы с попыткой заставить многоточие работать внутри контейнера display: flex , попробуйте добавить min-width: 0 в самый внешний контейнер, который переполняет его родительский элемент, даже если вы уже установили overflow: hidden и посмотрите, как это сработает для вас.
Дополнительные сведения и рабочий пример об этом codepen от aj-foster. Совершенно сработало в моем случае.
Включите четыре строки, написанные после информации, чтобы многоточие работало.
Также убедитесь, что для word-wrap установлено значение normal для IE10 и ниже.
Стандарты, указанные ниже, определяют поведение этого свойства как зависящее от настройки свойства «text-wrap». Однако параметры переноса по словам всегда действуют в Windows Internet Explorer, поскольку Internet Explorer не поддерживает свойство «перенос текста».
Следовательно, в моем случае для word-wrap было установлено значение break-word (унаследованное или по умолчанию?), В результате чего text-overflow работал в FF и Chrome, но не в IE.
anchor , span . теги по умолчанию являются встроенными элементами . В случае встроенных элементов свойство width не работает . Поэтому вам нужно преобразовать свой элемент в элементы inline-block или block level .
Я столкнулся с той же проблемой, и похоже, что ни одно из вышеперечисленных решений не работает для Safari. Для браузера, отличного от сафари, это отлично работает:
Для Safari это то, что мне подходит. Обратите внимание, что медиа-запрос для проверки того, является ли браузер Safari, со временем может измениться, поэтому просто поработайте с медиа-запросом, если он вам не подходит. С помощью свойства line-clamp также можно было бы иметь несколько строк в Интернете с многоточием, см. здесь .
Вы просто добавляете одну строчку css:
В bootstrap 4 , вы можете добавить класс .text-truncate , чтобы обрезать текст с многоточием.
НЕ ДОЛЖЕН содержать
Не могу комментировать из-за репутации, поэтому даю еще один ответ:
В этом случае вам также придется удалить обычно предлагаемое свойство display: block; из элемента, на котором вы установили text-overflow: ellipsis; , иначе оно будет отключено без . в конце.
У меня была эта проблема, и мне нужно было решение, которое могло бы легко работать с динамической шириной. В решении используется CSS-сетка. Вот как выглядит код:
Мне пришлось сделать несколько длинных описаний эллипса (занимать только одну полосу), пока я отвечал, поэтому я решил разрешить перенос текста (вместо white-space: nowrap ), и вместо фиксированной ширины я добавил фиксированную высоту:
Why doesn't word wrap property work properly in the example below?
What can I do to ensure that part of the word 'consectetur' fits in the first line itself? I want maximum number of characters to fit in each line.
7 Answers 7
If word-wrap: break-all don't work, try also add this:
work for me with the .btn class in Bootstrap 3
I had white-space:nowrap inherited from some parent style, thanks to the above answer I found out that it was what blocked the wrapping. Thanks!
Use word-break: break-all;
Breaking a word at an arbitrary point, without even adding a hyphen at the end of a line, is not correct by the rules of pig Latin, not to mention Latin or English.
To follow up @JukkaK.Korpela comment (be it many years ago), this is why the hyphens CSS property exists which hooks into the lang attribute. In those situations it is preferable to use that instead. Please see my answer below.
Okay so I know this is an old question but I seriously think there could be some useful clarification of when to use which property. Looking at the existing answers, I feel they offer solutions without explanation so here is my attempt to help with that. For context, by default, the container will not try to break a single long word up because it wants to preserve the word in it's original form.
With that said, 3 main ways to break up words there is overflow-wrap , word-break , and hypens . I won't dive too deep into hypens though.
So first off. I see word-wrap is being used in the question but reading the documentation, that is deprecated and some browsers have decided to simply alias it to overflow-wrap . It's probably preferred not to use that.
The distinction between the two properties is pretty clear in the documentation but for clarity, overflow-wrap really only has two possible values and will detect if a word has been overflowed. If it does, by default it moves the entire word to the next line. If break-word is set, it will only break up the word if the entire word couldn't be placed on that line.
You can see the pneumonoul. long word breaks exactly where it needs to on the next line after it attempts to separate the long word.
Now in contrast, we have word-break . This has more granular properties and actually also has a break-word option. This is synonymous to the above snippet so when to use one or the other I think is pretty trivial.
However, word-break also offers a break-all value which will break the word whenever possible to fit word where it was originally intended. It doesn't try to figure out if it needs the word to be on a new line or not -- it simply shoves the line break where it overflows. The biggest distinction here from the above is that long word we use is now still on the top.
And then finally for hyphens have their own special way of breaking up words. For more info take a look at the documentation. Also worth noting that different languages have different ways of breaking up words but fortunately the hyphens property hooks into the lang attribute and understands what to do.
Another option people have suggested is using the white-space property which attempts to break up text through spaces. In the example I used, this doesn't help our situation because the word itself is longer than the container. I think the important thing to note about this CSS property is that this doesn't attempt to break up words within themselves and rather tries to do it via spaces whenever appropriate.
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.
One thing the others don't seem to mention, you might have to put white-space back to normal if it's inherited.
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.
This is not the same as word-wrap:break-word; With word-break:break-all "Word breaks may be inserted between any character"
Firefox: The inline block approach causes theWord-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 .
thank god! white-space: nowrap was the solution for me. how TH are there so many properties for doing the same thing?
Yes this answer is helpful. white-space:nowrap might be inherited and cause problems. It should be set to a different value. In my case I set it to white-space:break-spaces. You should also be able to set to the value to "unset" without any problems; assuming word-break or overflow-wrap is set
Use this code (taken from css-tricks) that will work on all browser
white-space: break-spaces; also works with display: flex; and a margin to contain your text inside a container and break where necessary. only solution that worked in my case. thank you Rubel!
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-wrap property work's with display:inline-block :
- 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.
почему свойство 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, что это не пытается разбить слова внутри себя и скорее пытается сделать это через пробелы, когда это уместно.
Я не могу заставить перенос слов работать с этим примером .
Я вспомнил, как читал, что нужно было указать макет (что я и сделал), но помимо этого я не уверен, что мне нужно сделать, чтобы это работало. Мне бы очень хотелось, чтобы это работало в 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 .
Читайте также: