Почему текст не переносится на новую строку html
Перейти к содержимому

Почему текст не переносится на новую строку html

  • автор:

Проблемы с переносом слов

Я написал электронную книгу, и это был сущий кошмар, когда мне приходилось сталкиваться с CSS переносом текста внутри блоков кода. Иногда высота блока текста выше, чем контейнера. Иногда проблемы возникали из-за длинных URL-адресов :

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

Обновлено: 2021-07-14 19:23:17 Вадим Дворников автор материала

Свойства

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

Давайте бегло рассмотрим основные свойства.

Свойство word-wrap принимает два значения: normal ( по умолчанию ) и break-word . Это не считая трех глобальных значений: inherit , initial и unset .

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

В первом примере показано поведение по умолчанию для таких случаев:

Второй пример этой демо-версии иллюстрирует действие свойства overflow-wrap: break-word , которое указывает браузеру разрывать слово, когда оно выходит за пределы контейнера.

Важно отметить : в текущей версии спецификации по текстам CSS3 свойство word-wrap было заменено на overflow-wrap , которое принимает те же значения. Здесь вы найдете обзор поддержки браузерами этого нового свойства .

Свойство word-break предназначено только для требующих определенного поведения языков ( китайского, японского и корейского ).

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

Свойство hyphens указывает браузеру, как обрабатывать переносы слов с добавлением дефисов. Оно принимает следующие значения: none , manual и auto . Это свойство на данный момент поддерживается браузерами не полностью, поэтому будет работать нормально только в Firefox .

Значение none задает поведение, при котором дефисы никогда не будут добавляться в слова при разрыве строк.

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

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

Тег ­ задает мягкий CSS перенос текста на новую строку – он указывает разрыв слова, если это необходимо, но дефис на экране отображается только, если слово переносится.

Значение auto указывает, что слова могут разрываться в определенных местах или автоматически согласно разрешениям, указанным в ресурсах для конкретных языков ( если они предоставляются браузером ). В этом случае переносы будут зависеть от конкретного языка, и для документа должен быть указан атрибут lang .

Я предпочитаю использовать свойство white-space . Оно определяет, как пробелы, отступы табуляции, принудительные разрывы строк обрабатывается внутри элемента. Оно может оказаться чрезвычайно полезным для устранения неполадок и получение большего контроля над содержимым ячейки таблицы.

Свойство принимает пять значений: normal ( по умолчанию ), nowrap , pre , pre-wrap и pre-line .

Приведенная ниже демо-версия иллюстрирует все эти значения в действии; учитывайте дополнительные промежутки, включенные в разметку.

При CSS переносе текста в блоке по умолчанию пустые пространства объединяются и строки разрываются, чтобы соответствовать размерам контейнера. Это показано в первом примере, где в текст добавлены дополнительные пробелы, но при отображении они не выводятся.

Значение nowrap ( пример 2 ) также не воспринимает дополнительные пробелы, но в отличие от normal строки текста не переносятся в соответствии с размерами контейнера.

pre поддерживает дополнительное пробелы в разметке и не разрывает строки при выходе за пределы контейнера, как показано в примере 3.

Пример 4, pre-wrap не объединяет пустые пространства, но переносит строки при выходе за пределы контейнера.

Значение pre-line объединяет пробелы ( за исключением символов перехода на новую строку ) и разрывают текст, чтобы он соответствовал границам контейнера, как показано в последнем примере.

Блоки кода

По умолчанию блоки кода оборачиваются в теги pre и не переносятся. Это может привести к большой путанице.

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

Убедитесь, что все установленные значения white-space не приводят к объединению пустых пространств и пробелов, иначе это нарушит синтаксис кода.

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

Многоточия, которые имеют значение

CSS text-overflow: ellipsis является неудобным. Оно требует добавления большого количества кода, так как работает только в сочетании с кучей других свойств. Кроме этого, оно действует только на одну строку текста, что делает его еще более неудобным.
Есть JQuery-плагин , dotdotdot , который создает многоточие. С его помощью можно добавить даже ссылку в конце для продолжения чтения.

Вот пример его применения:

Супер специфические расположения разрывов

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

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

Hey what did you do this we­ekend? I painted some pottery, it was p neat.

Слишком длинные ссылки

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

По умолчанию они не разрываются, и это приводит к некорректному отображению на небольших экранах. URL-адрес нужно разрывать, когда это необходимо, но без дефисов, чтобы ссылка осталась рабочей. Также нужно быть очень осторожным при применении CSS переносов . Если вы сделаете что-то неправильно, разрываться будут не только URL-адреса , но и любые слова.

Применив overflow-wrap: break-word к ссылке, вы зададите разрыв URL-адреса при ее выходе за пределы контейнера, хотя это свойство поддерживается не во всех браузерах.

Заключение

Задать правильное сочетание свойств для решения проблемы переноса может оказаться непростой задачей. Но попрактиковавшись и проанализировав свои ошибки, вы сможете найти верное решение:

Заключение

Вадим Дворников автор-переводчик статьи « Word Wrapping Woes »

Перенос текста в ячейке

Microsoft Excel обеспечивает перенос текста в ячейке для его отображения на нескольких строках. Ячейку можно настроить для автоматического переноса текста или ввести разрыв строки вручную.

Автоматический перенос текста

  1. Выделите на листе ячейки, которые требуется отформатировать.
  2. На вкладке Главная в группе Выравнивание выберите пункт Переносить текст. (В Классической версии Excel можно также выделить ячейку, а затем нажать клавиши ALT+H+W.)

Кнопка

  • Данные в ячейке будут переноситься в соответствии с шириной столбца, поэтому при ее изменении перенос текста будет настраиваться автоматически.
  • Если текст с переносами отображается не полностью, возможно, задана точная высота строки или текст находится в объединенных ячейках.

Настройка высоты строки для отображения всего текста

  1. Выделите ячейки, для которых требуется выровнять высоту строк.
  2. На вкладке Главная в группе Ячейки нажмите кнопку Формат.
  3. В группе Размер ячейки выполните одно из следующих действий:
  4. Чтобы автоматически выравнивать высоту строк, выберите команду Автоподбор высоты строки.
  5. Чтобы задать высоту строк, выберите команду Высота строки и введите нужное значение в поле Высота строки.

Совет: Кроме того, можно перетащить нижнюю границу строки в соответствии с высотой текста в строке.

Ввод разрыва строки

Новую строку текста можно начать в любом месте ячейки.

    Дважды щелкните ячейку, в которую требуется ввести разрыв строки.

Совет: Можно также выделить ячейку и нажать клавишу F2.

Дополнительные сведения

Вы всегда можете задать вопрос эксперту в Excel Tech Community или получить поддержку в сообществах.

Не переносится текст на другую строку

введите сюда описание изображения

Подскажите, как исправить мой css, чтобы текст в тегах p переносился на следующую строку при уменьшении экрана. Всё, что знала, перепробовала. Не получается. Текст параграфа не переносится. На малых экранах просто обрезается, ибо overflow: hidden; Вот код: https://jsfiddle.net/omh38ajg/1/ (здесь почему-то неправильно отображается, пустой контейнер слайдера) Спасибо! ДОБАВЛЕНО: Как оказалось, код, приведенный ниже, работает во всех браузерах, кроме FireFox.Видимо, какое-то из свойств css требует вендорного префикса. Хотя, это довольно странно. Свойства обычные, все поддерживаются, насколько я понимаю. Автопрефиксер не помог. В общем, пришлось padding-ами / margin-ами выравнивать. + пожертвовать отображением картинки в FF. Сей браузер не приручился. p.s. Изображение я вниз перенесу. Сейчас именно текст мне остатки мозга сломал.

#slider, ul < height: 250px; >#slider < margin: auto; overflow: hidden; word-break: break-all; padding: 10px; border: 1px solid rgba(0, 0, 0, 0.15); margin-top: 20px; border-radius: 10px; box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.25); position: relative; width: 90%; max-width: 600px; >#slider li < float: left; position: relative; width: 600px; display: inline-block; min-height: 200px; >#slider ul < list-style: none; position: absolute; left: 0px; top: 0px; width: 9000px; transition: left .13s linear; -moz-transition: left .13s linear; -o-transition: left .3s linear; -webkit-transition: left .13s linear; margin-left: -55px; font-family: century gothic; color: #666; >/*** Content ***/ .slider-container < margin: 0 auto; padding: 0; width: 85%; min-height: 180px; border-bottom: 1px solid #ccc; >.slider-container h4 < color: #0A7FAD; text-shadow: -1px 0px 0px rgba(0, 0, 0, 0.50); >.slider-container p < margin: 10px -10px; font-weight: semi-bold; line-height: 150%; text-align: justify; >/*** target hooks ****/ @-webkit-keyframes slide-animation < 0% < opacity: 0; >2% < opacity: 1; >20% < left: 0px; opacity: 1; >22.5% < opacity: 0.6; >25% < left: -600px; opacity: 1; >45% < left: -600px; opacity: 1; >47.5% < opacity: 0.6; >50% < left: -1200px; opacity: 1; >70% < left: -1200px; opacity: 1; >72.5% < opacity: 0.6; >75% < left: -1800px; opacity: 1; >95% < opacity: 1; >98% < left: -1800px; opacity: 0; >100% < left: 0px; opacity: 0; >> #slider ul < -webkit-animation: slide-animation 40s infinite; >/* use to paused the content on mouse over */ #slider ul:hover
  • Однокомнатная кв

    Ленсовета, 14

    Сдается 1комнатная квартира у м. Звездная, 5 минут пешком. 8 этаж в 17 этажном доме. Новая гарнитурная мебель. Бытовая техника. 23 000 рублей в месяц. Залог. + КУ

  • Однокомнатная кв

    Ленсовета, 14

    Сдается 1комнатная квартира у м. Звездная, 5 минут пешком. 8 этаж в 17 этажном доме. Новая гарнитурная мебель. Бытовая техника. 23 000 рублей в месяц. Залог. + КУ

  • Однокомнатная кв

    Ленсовета, 14

    Сдается 1комнатная квартира у м. Звездная, 5 минут пешком. 8 этаж в 17 этажном доме. Новая гарнитурная мебель. Бытовая техника. 23 000 рублей в месяц. Залог. + КУ

  • Однокомнатная кв

    Ленсовета, 14

    Сдается 1комнатная квартира у м. Звездная, 5 минут пешком. 8 этаж в 17 этажном доме. Новая гарнитурная мебель. Бытовая техника. 23 000 рублей в месяц. Залог. + КУ

hyphens

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

Интерактивный пример

Правила расстановки переносов зависят от языка. В HTML язык определяется атрибутом lang , и браузеры применяют правила переноса только при присутствии данного атрибута и доступности соответствующего словаря для расстановки переносов. В XML необходимо использовать атрибут xml:lang (en-US) .

Примечание: Правила, определяющие, как выполняется расстановка переносов, явно не определены в спецификации, поэтому точная расстановка переносов может варьироваться от браузера к браузеру.

Синтаксис

/* Keyword values */ hyphens: none; hyphens: manual; hyphens: auto; /* Global values */ hyphens: inherit; hyphens: initial; hyphens: unset; 

Свойство hyphens задаётся как одно из ключевых значений, выбранного из списка ниже.

Значения

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

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

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

Примечание: Поведение параметра auto зависит от того, на каком языке применяются правила переноса. Вы должны указать язык с помощью HTML атрибута lang , чтобы гарантировать, что на этом языке применяется автоматическая расстановка переносов.

Предлагаемые возможности разрыва строки

Для указания потенциальных точек разрыва строки в тексте вручную используются два символа Unicode:

«Жёсткий» дефис указывает на возможность видимого разрыва строки. Даже если строка в этом месте не переносится, дефис всё равно отображается.

Невидимый «мягкий» перенос. Этот символ не отображается визуально, вместо этого он отмечает место, где браузер должен разорвать слово, если расстановка переносов необходима. В HTML, используйте ­ для вставки мягкого дефиса.

Формальное определение

Начальное значение manual
Применяется к все элементы
Наследуется да
Обработка значения как указано
Animation type discrete

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *