Word and text wrap

Wrap Text features work for figures in a Word document (see text wrapping for tables). Figures in Word mean any visual objects except tables and equations. So, using the same Wrap Text features can be used for images, ClipArt objects, charts, text boxes, diagrams, and SmartArt objects.

Change text wrapping

By default, Word inserts (see examples below):

• Pictures (images and photos), charts in line with the text.
• Text boxes, shapes in front of the text.
• WordArt objects behind the text.

To change the way how text should wrap the object, select it, then do one of the following:

• On the Picture Format (Shape Format, Graphics Format) tab, in the Arrange group, click the Wrap Text button:

  

• Right-click on the object, then choose Wrap Text in the popup menu:

  
    or  
  

• Click the Layout Options button that appears next to the selected figure:

  

From the Wrap Text list, choose the option you prefer:

• In Line with Text places an object in a paragraph on the same line as the surrounding text. The text does not wrap around it.

  

• Square wraps the text around the picture or shape on all sides at right angles (a square pattern) as if it is rectangular. The text fills the remaining rectangular region.

  This option is the most common form of text wrapping.

  

• Tight wraps the text around the edges of the figure. The text follows the shape.

  This option is most useful for larger images covering most of the page width.

  

• Through wraps the text around the picture or shape edges, including any white gaps. If there is no white space in the image or shape, text wrapping works the same as Tight.

  This option is an advanced setting because you pull or drag image and shape points in and out of their original borders:

  

  See how to edit hyphenation points.

• Top and Bottom wraps the text above and below the figure to keep the image on its line. There is no text on either side of it.

  

• Behind Text places the figure behind, or underneath, any existing text. The text does not wrap around it.

  The picture looks like a watermark or background image.

  

  Note: Use the Selection pane when working with objects behind the text.

• In Front of Text places the object on top of the text. The text is not wrapped, so some of it may be blocked depending on the figure’s transparency.

  

Note: Figures that use the Square, Tight, Through, Top and Bottom, Behind Text, or In Front of Text wrapping style are all considered floating.

Position a figure to a paragraph or page

Also, Word offers two options for all wrapping styles except In line with Text (for floating figures):

  or  

• Move with Text moves the figure along with the surrounding text.

  If a figure is positioned inside the paragraph, and you delete or add any content before the paragraph, the figure moves with the paragraph. See more about Positioning a picture, text box, or shape on the page.

• Fix Position on Page keeps the figure at the same place on the page when text is added or removed.

  If the paragraph where the figure is located (that paragraph contains anchor) moves to the next page, the figure moves and keeps its position relative to the page.

Note: The same options you can find in the Layout dialog box, on the Position tab, in the Options section:

Checking the Move object with text check box is equivalent to the Move with Text option from the Wrap Text dropdown list. Unchecking the Move object with text check box is equivalent to the Fix Position on Page option.

Wrap text on both sides, or one side only

To change additional options, choose More Layout Options… from the Wrap Text dropdown list or the See more… link in the Layout Options menu.

In the Layout dialog box, on the Text Wrapping tab:

• In the Wrapping style group, choose any style exact In line with text (see above).
• In the Wrap text group (available for the Square, Tight, and Thought wrapping styles), choose any of the additional options:
  • Both sides wraps text around either side of the image or shape:

    

  • Left only wraps text around only the left side of the image or shape:

    
  • Right only wraps text around only the right side of the image or shape:

    

  • Largest only wraps text on the side of the image or shape with the larger distance from the margin.

Change the distance between text and object

To change the distance between text and the visual object, open the Layout dialog box by one of the following methods:

• On the Picture Format (Shape Format, Graphics Format) tab, in the Arrange group, click the Wrap Text button, then select More Layout Options…
• Right-click on the object, click the Wrap Text list, then select More Layout Options… in the popup menu.
• Click the See more… link in the Layout Options menu.

In the Layout dialog box, on the Text Wrapping tab, in the Distance from text section, enter custom values for the distance between the text and the picture independently for:

• Top and Bottom (available for the Square, Tight, Thought, and Top and Bottom wrapping styles),
• Left and Right (available for the Square, Tight, and Thought wrapping styles).

For example, with the 0.3-inch distance on all sides:

Edit hyphenation points

To use the Tight or Through options effectively, you may need to adjust the wrapping points for the image or shape. To edit wrap points, select the object, then activate the Edit Wrap Points view by one of the following methods:

• Picture Format (Shape Format, Graphics Format) tab, in the Arrange group, click the Wrap Text button. Then choose Edit Wrap Points from the Wrap Text dropdown list:

  

• Right-click on the object and select Wrap Text -> Edit Wrap Points in the popup menu:

  

In the Edit Wrap Points view, drag the red lines to adjust where the text wraps:

Note: There is no way to add points. You can move existing wrap points however you want.

Be careful! After changing a text wrapping option or copy-pasting the picture, Word lost the changes of Wrap Points.

From corporate logos in press releases to scientific diagrams in research papers, there are many reasons to include images in a Microsoft Word document. But how images fit with surrounding text is important when formatting a document, so you need to understand text wrapping.

What Is Text Wrapping in Microsoft Word?

Text wrapping refers to how images are positioned in relation to text in a document, allowing you to control how pictures and charts are presented. Your options for this in Microsoft Word are:

In Line with Text

This option places an image on the same line as surrounding text. The image will thus move as text is added or removed, whereas the other options here mean the image stays in one position while text shifts and ‘wraps’ around it.

Square

This wraps text around an image on all sides at right angles, as if it had a rectangular box around it. This is the most common form of text wrapping.

Top and Bottom

Text wraps above and below the image so it is on its own line. This is most useful for larger images that occupy most of the width of a page.

Tight

This is similar to Square but without the rectangular box, so text wraps around the edges of the image itself. Useful for irregularly shaped images.

Through

Similar to Tight, but text will also fill any white gaps within the image.

Behind

Places an image behind the text, allowing you to add a watermark or background image on a page (although MS Word has a separate watermark option, too, which is easier to use in many cases).

In Front of Text

Places the picture in front of the text. This can be used to place a circle around some text or to add an arrow to highlight part of a passage.

The best choice will depend on your needs, but Square and Tight work in most cases. As such, these should be your default options.

How to Control Text Wrapping

After adding an image to a document, you can adjust the text wrapping to make sure it fits with the surrounding text. To do this:

• Click the image you want to format
• Click Layout Options or go to Format > Arrange on the ribbon
• Open the Wrap Text menu and select the setting required

If you want to use the Tight or Through options effectively, you may also need to adjust the wrapping points for the image. To do this:

• Select the image you want to adjust
• Go to Format > Arrange
• Open the Wrap Text menu and click Edit Wrap Points
• Drag the red lines to adjust the wrap points as required

The instructions above are for Microsoft Word on Windows computers, but the process is similar in Word for Mac.

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

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

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

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

Как происходит перенос контента в браузерах?

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

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

Хотя в английских текстах для символов пробела используются мягкие обертки, для неанглийских систем письма ситуация может быть иной. Некоторые языки не используют пробелов для разделения слов. Следовательно, упаковка содержимого зависит от языка или системы письма. Значение атрибута lang, которое вы указываете в элементе html, в основном используется для определения того, какая языковая система используется. В этой статье основное внимание будет уделено системе письма на английском языке.

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

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

В чем разница между мягким и принудительным переносом строки?

Любой перенос текста, который происходит при использовании мягкого переноса, называется разрывом мягкого переноса. Чтобы перенос происходил при использовании мягкого обертывания, необходимо убедиться, что обертывание включено. Например, установка значения nowrap для свойства white-space отключит перенос.

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

CSS свойства word-wrap и overflow-wrap

Название word-wrap — это устаревшее имя свойства overflow-wrap. Word-wrap изначально было расширением Microsoft. Оно не было частью стандарта CSS, хотя большинство браузеров реализовали его под названием word-wrap. Согласно проекту спецификации CSS3, браузеры должны рассматривать word-wrap как устаревший псевдоним для свойства overflow-wrap.

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

Если у вас есть свойство white-space для элемента, вам необходимо установить для него значение allow, чтобы разрешить эффект переноса для overflow-wrap. Ниже приведены значения свойства overflow-wrap. Вы также можете использовать глобальные значения inherit, initial, revert и unset для overflow-wrap, но здесь мы не будем их рассматривать.

Ниже мы рассмотрим значения свойства CSS overflow-wrap, чтобы понять его поведение.

Normal

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

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

Anywhere

Использование значения в аnywhere приведет к разрыву неразрывной строки в произвольных точках между двумя символами. Аnywhere не будет добавлять символ дефиса, даже если вы примените свойство hyphens к этому элементу.
Браузер разорвет слово только в том случае, если отображение слова приведет к переполнению. Если слово вызывает переполнение, оно будет разорвано в точке, где это переполнение произошло.

Когда вы используете аnywhere, браузер будет учитывать возможности мягкого переноса, предоставляемые разрывом слова, при вычислении внутренних размеров min-content:

В отличие от предыдущего примера, где мы использовали overflow-wrap: normal, на изображении ниже мы используем overflow-wrap :where. Слово-переполнение, которое невозможно разбить, разбивается на фрагменты текста с помощью overflow-wrap: anywhere, чтобы оно поместилось в своем контейнере.

Значение anywhere не поддерживается некоторыми браузерами. На изображении ниже показана поддержка браузерами по данным caniuse.com. Поэтому не рекомендуется использовать overflow-wrap: anywhere, если вы хотите иметь более высокую поддержку браузера.

Break-word

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

На изображении ниже показано, как браузер прерывает переполненный текст в предыдущем разделе, когда вы применяете overflow-wrap: break-word. Вы заметите, что изображение ниже выглядит так же, как изображение в последнем примере. Разница между overflow-wrap: anywhere и overflow-wrap: break-word заключается в вычислении внутренних размеров min-content.

Разница между anywhere и break-word очевидна при вычислении внутренних размеров min-content. С break-word браузер не учитывает возможности мягкого переноса, предоставляемые разрывом слова, при вычислении внутренних размеров min-content, но он учитывает возможности мягкого переноса при использовании anywhere.

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

На изображении ниже показана поддержка браузеров overflow-wrap: break-word согласно caniuse.com. Вы заметите, что последние версии десктопных браузеров имеют поддержку, в то время как поддержка некоторых мобильных браузеров неизвестна.

Свойство Word-break

Word-break — еще одно свойство CSS, которое вы можете использовать для указания возможности мягкого переноса между символами. Вы можете использовать это свойство, чтобы разбить слово в том месте, где могло произойти переполнение, и перенести его на следующую строку.

Ниже приводится то, что говорится о свойстве CSS word-break в спецификации CSS3:

Это свойство определяет возможности мягкого переноса между буквами, то есть там, где это «нормально» и допустимо для разрывов строк текста. Word-break контролирует, какие типы букв браузер может объединять в неразрывные «слова», заставляя символы CJK вести себя как текст, не относящийся к CJK, или наоборот.

Ниже приведены возможные значения CSS-свойства word-break. Как и для overflow-wrap, вы также можете использовать глобальные значения inherit, initial, revert и unset, но мы не будем рассматривать их здесь:

Break-word также является значением для CSS-свойства word-break, хотя оно устарело. Однако, браузеры по-прежнему поддерживают его. Указание этого свойства имеет тот же эффект, что и word-break: normal и overflow-wrap :where.

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

Normal

Установка для свойства word-break значение normal будет применять правила разбиения по словам по умолчанию:

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

Break-all

Значение break-all вставит разрыв строки именно в том месте, где текст переполнился бы для некитайских, неяпонских и некорейских систем письма. Слово не будет помещено в отдельную строку, даже если это предотвратит необходимость вставки разрыва строки:

На изображении ниже я применил стиль word-break:break-all к элементу p шириной 240 пикселей, содержащему переполненный текст. Браузер вставил разрыв строки в точке, где могло произойти переполнение, и перенес оставшийся текст в следующую строку.

Использование break-all приведет к разрыву слова между двумя символами именно в том месте, где произойдет переполнение в английском и других родственных языковых системах. Однако это не применимо к текстам на китайском, японском и корейском языках (CJK).

Он не применяет то же поведение к текстам CJK, потому что системы письма CJK имеют свои собственные правила для применения брейкпоинтов. Создание разрыва строки между двумя символами произвольно во избежание переполнения может значительно изменить общий смысл текста. Для систем CJK браузер будет применять разрывы строк в том месте, где такие разрывы разрешены.

На изображении ниже показана поддержка браузером word-break: break-word согласно caniuse.com. Хотя последние версии современных веб-браузеров поддерживают это значение, поддержка среди некоторых мобильных браузеров неизвестна.

Keep-all

Если вы используете значение keep-all, браузер не будет применять разрывы слов к текстам CJK, даже если происходит переполнение содержимого. Эффект от применения значения keep-all такой же, как и у normal для систем письма, отличных от CJK:

На изображении ниже применение word-break: keep-all имеет тот же эффект, что и word-break: normal, потому что я использую систему письма, отличную от CJK (английский язык).

На изображении ниже показана поддержка браузером word-break: keep-all согласно caniuse.com. Это значение поддерживается в большинстве популярных десктопных браузеров. К сожалению, это не относится к мобильным браузерам.

Теперь, когда мы рассмотрели свойства CSS overflow-wrap и word-break, в чем разница между ними?

В чем разница между overflow-wrap и разр word-break?

Вы можете использовать CSS свойства overflow-wrap и word-break для управления переполнением содержимого. Однако существуют различия в способах обработки этих двух свойств.

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

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

С другой стороны, word-break безжалостно разорвет слово, которое выходит за границы, между двумя символами, даже если размещение его в новой строке устранит необходимость в разрыве слова. Кроме того, некоторые системы письма, такие как системы письма CJK, имеют строгие правила разбиения по словам, которые браузер принимает во внимание при создании разрывов строк с помощью word-break.

Заключение

Как указывалось в предыдущих разделах, overflow-wrap и word-break во многом схожи. Вы можете использовать оба из них для управления разрывом строки.

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

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

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

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

Автор: Joseph Mawa

Источник: blog.logrocket.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен