Microclimate.su

IT Новости
4 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Word wrap break word

Перенос слов CSS (свойства overflow-wrap, word-wrap, word-break, hyphens)

Указанные ниже свойства CSS определяют как переносить длинные слова:

  1. только там, где стоит чёрточка, пробел или Enter (искл., неразрывный пробел и неразрывный дефис ‑ ). Между частями одного слова пишется дефис (например, красно‐жёлтый), между словами — тире. «Мягкий дефис» ­ проявляется только при необходимости переноса. Если слово выходит за рамки родителя, то или ​ переносит его часть без чёрточки. В математических выражениях используется минус (например, 5 − 2). В номерах телефонов отображается цифровая чёрта (например, +7 800 000‒00‒00). И всё это не является той знакомой -, что есть на клавиатуре.
  2. после любого символа.
  3. согласно правилам русского языка с автоматическим применением дефиса.

В чём состоит различие одно свойства от другого

По умолчанию длинные слова не переносятся, если на то нет явных указаний с помощью дефиса, и начинаются с новой строки.

Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим word-break: keep-all; .

Для того, чтобы браузер не обращал внимания и на мягкий дефис, вставляем hyphens: none; .

Если требуется перенос слов, то word-wrap: break-word; советую применять всегда, поскольку он понимается всеми браузерами. Он отличается от word-break: break-all; , которое является приоритетным, тем, что слова, которые не помещаются в блок, начинаются с новой строки и учитывается рекомендация мягкого дефиса.

При совместном использовании word-break: break-all; с hyphens: auto; , последнее игнорируется. hyphens: auto; расставляет любые дефисы по своему усмотрению. Но для того, чтобы оно работало, нужно обозначить свой язык, указав в div атрибут lang=»ru» .

Не переносить слова на другую строку

Скажем, пункт меню или кнопка будут нехорошо выглядеть, если разъедутся на части. Поэтому надо запретить их разделение. Для чего все вышеуказанные свойства следует поставить в режим «по умолчанию» и добавить white-space: pre; или white-space: nowrap;. Нажмите на white-space: nowrap; и посмотрите на наш полигон.

Управлять переносом слов при hyphens: auto;

15 комментариев:

Анонимный Хорошая статья. Спасибо! NMitra Рада слышать! Анонимный здорово, спасибо Vit Simak white-space: pre-wrap; очень помогает, но только если он один указан или максимум с word-wrap: break-word; Анонимный ыва Людмила Горбач ваваы Максим Дунаевский Вот спасибо! Поправил свою CSS как тут написано — текст на кнопках стал нормально отображаться. NMitra Пожалуйста, рада помочь. Анонимный Спасибо, хорошая статья. Анонимный kjgtfrfghjkl Анонимный ‘); drop table forum; — lol NMitra Чего-чего? Дмитрий lang=»ru» лучше писать в

-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-wrap: break-word; NMitra Спасибо за дополнение! Dmitry Mycelin «’); drop table forum; — lol»
Это гугловская форма комментариев вообще-то. 🙂

В чем разница между «word-break: break-all» и «word-wrap: break-word» в CSS

300 Nap [2009-11-25 09:56:00]

В настоящее время я задаюсь вопросом, в чем разница между ними. Когда я использовал оба, они, похоже, сломают слово, если оно не подходит для контейнера. Но почему W3C сделал два способа сделать это?

9 ответов

167 Решение AakashM [2009-11-25 13:02:00]

Спецификация W3, которая говорит об этих, кажется, предполагает, что word-break: break-all требуется для определенного поведения с CJK (китайским, японским и Корейский), тогда как word-wrap: break-word является более общим, не связанным с CJK, поведением.

word-wrap: break-word недавно изменен на overflow-wrap: break-word

  • переносит длинные слова на следующую строку.
  • настраивает разные слова, чтобы они не разбивались посередине.
  • независимо от того, является ли оно непрерывным словом или многими словами, разбивает их на край предела ширины. (то есть даже внутри символов одного и того же слова)

Итак, если у вас много фиксированных пространств, которые получают контент динамически, вы можете просто использовать word-wrap: break-word , так как в этом случае прерываются только непрерывные слова, а в случае, если предложение содержит много слов, пробелы настраиваются, чтобы получить неповрежденные слова (без разрыва в слове).

Читать еще:  Как файл jpeg перевести в word

И если это не имеет значения, идите либо.

78 shuky [2013-10-13 13:56:00]

С word-break начинается очень длинное слово в точке, в которой оно должно начинаться и он прерывается до тех пор, пока требуется

Однако, при word-wrap , очень длинное слово НЕ начнется в точке, в которой оно должно начинаться. он переносится на следующую строку и затем разбивается до тех пор, пока требуется

По крайней мере, в Firefox (начиная с версии v24) и Chrome (начиная с версии v30) при применении к контенту в элементе table :

на самом деле не приведет к переносу длинных слов, что может привести к тому, что таблица превысит границы ее контейнера;

приведет к переводу слов и привязке таблицы к контейнеру.

Это все, что я могу узнать. Не уверен, что это помогает, но я думал, что добавлю его в микс.

СЛОВО-WRAP

Это свойство указывает, должна ли текущая линия визуализации сломаться, если содержимое превышает границу указанного поля рендеринга для элемента (это в какой-то мере похоже на свойства «клип» и «переполнение» в намерении.) Это свойство должно применять, если элемент имеет визуальный рендеринг, является встроенным элементом с явной высотой/шириной, абсолютно позиционируется и/или является блочным элементом.

СЛОВО-BREAK

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

21 André Pena [2016-11-05 22:26:00]

word-wrap , вероятно, был переименован в overflow-wrap , чтобы избежать этой путаницы.

Теперь это то, что у нас есть:

Переполнение-обертка

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

normal: указывает, что линии могут ломаться только при нормальных точках прерывания слов.

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

слово-пауза

Свойство CSS word-break используется для указания того, следует ли разбивать строки внутри слов.

  • обычный. Используйте правило прерывания по умолчанию.
  • break-all. Разрывы слов могут быть вставлены между любым символом для текста, отличного от CJK (китайский/японский/корейский).
  • сохранить все. Не допускайте разрывов слов для текста CJK. Не-CJK-поведение текста такое же, как и для обычного.

Теперь вернемся к вашему вопросу, основное различие между переполнением и word-break заключается в том, что первое определяет поведение в ситуации переполнения, а позднее определяет поведение в нормальной ситуации (без переполнения). Ситуация переполнения происходит, когда в контейнере недостаточно места для хранения текста. Разрыв линий в этой ситуации не помогает, потому что нет места (представьте себе коробку с шириной и высотой фиксации).

  • overflow-wrap: break-word : В ситуации переполнения сломайте слова.
  • word-break: break-all : В обычной ситуации просто сложите слова в конце строки. Переполнение не требуется.

Из соответствующих спецификаций W3, которые, по-видимому, неясны из-за отсутствия контекста, можно сделать следующее:

  • word-break: break-all предназначен для разбивки иностранных, не-CJK (например, западных) слов в CJK (китайском, японском или корейском) характерах.
  • word-wrap: break-word предназначен для разрыва слова в не смешанном (скажем, исключительно западном) языке.

По крайней мере, это были намерения W3. В результате на самом деле произошел серьезный взлет с несовместимостью браузера. Вот отличная запись различных проблем.

Следующий фрагмент кода может служить сводкой о том, как добиться переноса слов с помощью CSS в среде с несколькими браузерами:

5 Ehsan [2016-09-20 21:53:00]

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

Во-первых, перенос слов в новой строке затем продолжается.

What is the difference between “word-break: break-all” versus “word-wrap: break-word” in CSS

I am currently wondering what is the difference between the two. When I used both they seem to break the word if it is not fitting the container. But why did W3C made two ways to do it?

Читать еще:  Word cloud online

10 Answers 10

The W3 specification that talks about these seem to suggest that word-break: break-all is for requiring a particular behaviour with CJK (Chinese, Japanese, and Korean) text, whereas word-wrap: break-word is the more general, non-CJK-aware, behaviour.

word-wrap: break-word recently changed to overflow-wrap: break-word

  • will wrap long words onto the next line.
  • adjusts different words so that they do not break in the middle.
  • irrespective of whether it’s a continuous word or many words, breaks them up at the edge of the width limit. (i.e. even within the characters of the same word)

So if you have many fixed-size spans which get content dynamically, you might just prefer using word-wrap: break-word , as that way only the continuous words are broken in between, and in case it’s a sentence comprising many words, the spaces are adjusted to get intact words (no break within a word).

And if it doesn’t matter, go for either.

With word-break , a very long word starts at the point it should start and it is being broken as long as required

However, with word-wrap , a very long word WILL NOT start at the point it should start. it wrap to next line and then being broken as long as required

word-wrap has been renamed to overflow-wrap probably to avoid this confusion.

Now this is what we have:

overflow-wrap

The overflow-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.

normal: Indicates that lines may only break at normal word break points.

break-word: Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

word-break

The word-break CSS property is used to specify whether to break lines within words.

  • normal: Use the default line break rule.
  • break-all: Word breaks may be inserted between any character for non-CJK (Chinese/Japanese/Korean) text.
  • keep-all: Don’t allow word breaks for CJK text. Non-CJK text behavior is the same as for normal.

Now back to your question, the main difference between overflow-wrap and word-break is that the first determines the behavior on an overflow situation, while the later determines the behavior on a normal situation (no overflow). An overflow situation happens when the container doesn’t have enough space to hold the text. Breaking lines on this situation doesn’t help because there’s no space (imagine a box with fix width and height).

  • overflow-wrap: break-word : On an overflow situation, break the words.
  • word-break: break-all : On a normal situation, just break the words at the end of the line. An overflow is not necessary.

Как в CSS решить проблему длинных слов

Веб-пространство построено на контенте, а контент состоит из слов, и возможно из очень длинных. Всем « участникам » всемирной паутины рано или поздно приходится иметь дело с длинными словами:


Пример

Каждый день в сети я встречаю практически все виды дефектов отображения, связанных с длинными словами – « сломанные » макеты, обрезку слов и ситуацию, которая приведена на изображении выше.

Переносы

Первое решение для длинных слов — это применение переносов.


Пример

Поддержка браузерами: CSS -переносы поддерживаются во всех популярных браузерах, за исключением браузеров, реализованных на основе движка Blink ( Chrome, Opera, Android ). Здесь описаны все распространенные ошибки в Chrome . Я также протестировал Safari 5.1 под Windows , в котором переносы поддерживаются, но для моих тестовых слов все они добавлялись не в тех местах, в которых нужно.

Читать еще:  Word рамка вокруг текста

Кроме этого, переносы во многом зависят от правил языка. Вам нужно определить атрибут lang в родительском элементе. Также нужно помнить, что другие языки, кроме английского , поддерживаются в браузерах на весьма низком уровне.

Вы также можете использовать библиотеку JavaScript , такую как Hyphenator.js , которая работает со многими языками и многими браузерами. Недостатком этого решения является то, что вам нужно будет загружать много дополнительных скриптов JavaScript , что может существенно снизить производительность.

word-break

Так как не все браузеры полностью поддерживают перенос слов, давайте попробуем это свойство CSS , которое указывает, следует ли разрывать строки внутри слов:


Пример

Поддержка браузерами: Свойство CSS word-break поддерживается во всех браузерах , за исключением Opera Mini и старых браузеров Opera на основе Presto .

Overflow-wrap

Еще одно возможное решение данной проблемы — использование word-wrap ( overflow-wrap ). Еще одно свойство, которое указывает, может ли браузер разбивать строки внутри слов:


Пример

Поддержка браузерами: Свойство CSS word-wrap поддерживается во всех браузерах . В некоторых из них для нормальной работы требуется указывать унаследованное имя word-wrap (а не overflow-wrap ).

Эллипсис

Еще один вариант для решения проблемы длинных слов — это усечение:


Пример

Поддержка браузерами: Text-overflow поддерживается во всех основных браузерах .

На первый взгляд кажется, что этот метод неплохо справляется с нашей проблемой, но он имеет ряд недостатков. Прежде всего, он будет обрезать любой текст, занимающий более одной строки, даже если вы использовали короткие слова, и они прекрасно разместились бы в нескольких строках. Кроме этого слова могут обрезаться так, что исходное слово будет приобретать другое значение.

Пожалуйста, не используйте text-overflow : ellipsis , потому что сокращать слова — это не работа CSS . Только, если вам действительно необходимо это сделать на стороне сервера, и только после полного сокращения слов.

Заключение

Я проверил все приведенные выше примеры и их сочетания в следующих браузерах: IE7 , IE8 , IE9 , IE10 , IE11 , Edge , Firefox 39 ( Windows, Linux, Mac ), Chrome 44 ( Windows, Linux, Mac ), Opera 30 ( Windows, Mac ) , Safari 8 ( Mac ), Safari 5.1 ( Windows ), Android-5 ( Nexus 6 ), Android 4.4 ( Nexus 5 ), Android 2.3 ( Galaxy S2 ), IOS 8.3 ( iPhone 6 ), IOS 7 ( iPhone 5S ), IOS 6 ( iPhone5 ), Opera Mini ( Android 5 ), Opera Classic ( Android 5 ), Opera Mobile ( Android 5 ) и Windows Phone 8.1 ( Lumia 930 ), используя реальные устройства и BrowserStack . По этой ссылке вы найдете список всех 26-браузеров, по этой ссылке — результаты их тестирования.

В интернете можно найти и такое решение :

Хотя это прекрасно работает в большинстве случаев, я выяснил, что в Firefox перенос не будет работать ( хотя он и поддерживается ) в сочетании с word-break . Как и word-break , это свойство не поддерживается, и не будет работать в Opera Mini .

В то же время overflow-wrap прекрасно поддерживается браузерами. Я протестировал следующее решение, используя overflow-wrap и перенос.

Окончательное решение

Этот код выводит переносы во всех браузерах, в которых они поддерживаются, и разрывы строк во всех остальных. Хотя я и протестировал это решение в 26 различных браузерах, но до сих пор не уверен, что оно будет работать в 100% случаев — если вы найдете какое-нибудь исключение, пожалуйста, дайте знать об этом в комментариях к статье.

Данная публикация представляет собой перевод статьи « Dealing with long words in CSS » , подготовленной дружной командой проекта Интернет-технологии.ру

Ссылка на основную публикацию
Adblock
detector