Меню Закрыть

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

Содержание

Указанные ниже свойства 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»
Это гугловская форма комментариев вообще-то. 🙂

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


Пример

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

Переносы

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


Пример

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

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

Читайте также:  Материнка asus p5k se

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

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

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

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

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

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

Во всех браузерах слова переносятся, а в IE нет. Как правильно прописать?

1 ответ 1

Не работает перенос по двум причинам:

Во-первых, элемент должен иметь вариант отображения отличный от inline . Именно этот вариант задан для элемента a по умолчанию.
Во-вторых, для элемента должна быть указана ширина.

Пример исправления поведения:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css internet-explorer или задайте свой вопрос.

Похожие

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.1.17.35809

Рекомендуем к прочтению

Добавить комментарий

Ваш адрес email не будет опубликован.