Как переместить текст вправо в css

Изменение направления текста

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

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

Prerequisites:	Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Цель:	Понять важность режимов письма для современного CSS.

Какие бывают режимы письма?

Режим письма в CSS определяет, идёт ли текст по горизонтали или по вертикали. Свойство writing-mode позволяет нам переключаться из одного режима письма в другой. Для этого вам не обязательно работать на языке, который использует режим вертикального письма — вы также можете изменить режим письма частей вашего макета для творческих целей.

В приведённом ниже примере заголовок отображается с использованием writing-mode: vertical-rl . Теперь текст идёт вертикально. Вертикальный текст часто используется в графическом дизайне и может быть способом добавить более интересный вид вашему веб-дизайну.

Три возможных значения свойства writing-mode :

• horizontal-tb : Направление потока блока сверху вниз. Предложения идут горизонтально.
• vertical-rl : Направление потока блоков справа налево. Предложения идут вертикально.
• vertical-lr : Направление потока блока слева направо. Предложения идут вертикально.

Таким образом, свойство writing-mode на самом деле устанавливает направление, в котором элементы уровня блока отображаются на странице — сверху вниз, справа налево или слева направо. Это затем определяет направление движения текста в предложениях.

Writing modes and block and inline layout

We have already discussed block and inline layout, and the fact that some things display as block elements and others as inline elements. As we have seen described above, block and inline is tied to the writing mode of the document, and not the physical screen. Blocks are only displayed from the top to the bottom of the page if you are using a writing mode that displays text horizontally, such as English.

If we look at an example this will become clearer. In this next example I have two boxes that contain a heading and a paragraph. The first uses writing-mode: horizontal-tb , a writing mode that is written horizontally and from the top of the page to the bottom. The second uses writing-mode: vertical-rl ; this is a writing mode that is written vertically and from right to left.

When we switch the writing mode, we are changing which direction is block and which is inline. In a horizontal-tb writing mode the block direction runs from top to bottom; in a vertical-rl writing mode the block direction runs right-to-left horizontally. So the block dimension is always the direction blocks are displayed on the page in the writing mode in use. The inline dimension is always the direction a sentence flows.

This figure shows the two dimensions when in a horizontal writing mode.

This figure shows the two dimensions in a vertical writing mode.

Once you start to look at CSS layout, and in particular the newer layout methods, this idea of block and inline becomes very important. We will revisit it later on.

Direction

In addition to writing mode we also have text direction. As mentioned above, some languages such as Arabic are written horizontally, but right-to-left. This is not something you are likely to use in a creative sense — if you simply want to line something up on the right there are other ways to do so — however it is important to understand this as part of the nature of CSS. The web is not just for languages that are displayed left-to-right!

Due to the fact that writing mode and direction of text can change, newer CSS layout methods do not refer to left and right, and top and bottom. Instead they will talk about start and end along with this idea of inline and block. Don’t worry too much about that right now, but keep these ideas in mind as you start to look at layout; you will find it really helpful in your understanding of CSS.

Logical properties and values

The reason to talk about writing modes and direction at this point in your learning however, is because of the fact we have already looked at a lot of properties which are tied to the physical dimensions of the screen, and make most sense when in a horizontal writing mode.

Let’s take a look at our two boxes again — one with a horizontal-tb writing mode and one with vertical-rl . I have given both of these boxes a width . You can see that when the box is in the vertical writing mode, it still has a width, and this is causing the text to overflow.

What we really want in this scenario, is to essentially swap height and width along with the writing mode. When we’re in a vertical writing mode we want the box to expand in the block dimension just like it does in the horizontal mode.

To make this easier, CSS has recently developed a set of mapped properties. These essentially replace physical properties — things like width and height — with logical, or flow relative versions.

The property mapped to width when in a horizontal writing mode is called inline-size — it refers to the size in the inline dimension. The property for height is named block-size and is the size in the block dimension. You can see how this works in the example below where we have replaced width with inline-size .

Logical margin, border, and padding properties

In the last two lessons we have learned about the CSS box model, and CSS borders. In the margin, border, and padding properties you will find many instances of physical properties, for example margin-top , padding-left , and border-bottom . In the same way that we have mappings for width and height there are mappings for these properties.

The margin-top property is mapped to margin-block-start (en-US) — this will always refer to the margin at the start of the block dimension.

The padding-left property maps to padding-inline-start (en-US), the padding that is applied to the start of the inline direction. This will be where sentences start in that writing mode. The border-bottom property maps to border-block-end (en-US), which is the border at the end of the block dimension.

You can see a comparison between physical and logical properties below.

If you change the writing mode of the boxes by switching the writing-mode property on .box to vertical-rl , you will see how the physical properties stay tied to their physical direction, whereas the logical properties switch with the writing mode.

You can also see that the (en-US) has a black border-bottom . Can you work out how to make that bottom border always go below the text in both writing modes?

There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for Logical Properties and Values (en-US) .

Logical values

We have so far looked at logical property names. There are also some properties that take physical values of top , right , bottom , and left . These values also have mappings, to logical values — block-start , inline-end , block-end , and inline-start .

For example, you can float an image left to cause text to wrap round the image. You could replace left with inline-start as shown in the example below.

Change the writing mode on this example to vertical-rl to see what happens to the image. Change inline-start to inline-end to change the float.

Here we are also using logical margin values to ensure the margin is in the correct place no matter what the writing mode is.

Should you use physical or logical properties?

The logical properties and values are newer than their physical equivalents, and therefore have only recently been implemented in browsers. You can check any property page on MDN to see how far back the browser support goes. If you are not using multiple writing modes then for now you might prefer to use the physical versions. However, ultimately we expect that people will transition to the logical versions for most things, as they make a lot of sense once you start also dealing with layout methods such as flexbox and grid.

Summary

The concepts explained in this lesson are becoming increasingly important in CSS. An understanding of the block and inline direction — and how text flow changes with a change in writing mode — will be very useful going forward. It will help you in understanding CSS even if you never use a writing mode other than a horizontal one.

In the next module we will take a good look at overflow in CSS.

In this module

1. Cascade and inheritance
2. CSS selectors
   • Type, class, and ID selectors
   • Attribute selectors
   • Pseudo-classes and pseudo-elements
   • Combinators
3. The box model
4. Backgrounds and borders
5. Handling different text directions
6. Overflowing content
7. Values and units
8. Sizing items in CSS
9. Images, media, and form elements
10. Styling tables
11. Debugging CSS
12. Organizing your CSS (en-US)

Как перемещать текст по странице сайта в css? [закрыт]

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

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение.

Закрыт 7 лет назад .

Есть блок, и на нем должны быть размещены различные фразы-ссылки. Одну из них мне нужно переместить вправо на некоторое количество пикселей. Как это сделать?

Выравнивание элементов во Flex контейнере

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

Для центрирования элемента по перекрёстной оси (в данном случае — вертикальной) используется свойство align-items . Для центрирования элемента по главной оси (в данном случае — горизонтально), используется свойство justify-content .

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

Свойства управления выравниванием

В этом руководстве рассматриваются следующие свойства:

• justify-content — управляет выравниванием элементов по главной оси.
• align-items — управляет выравниванием элементов по перекрёстной оси.
• align-self — управляет выравниванием конкретного flex элемента по перекрёстной оси.
• align-content — описывается в спецификации как «упаковка flex строк»; управляет промежутками между flex строками по перекрёстной оси.

Также будет рассмотрены авто-отступы для выравнивания элементов во flexbox.

Примечание: Свойства выравнивания во Flexbox помещены в отдельную спецификацию — CSS Box Alignment Level 3. Ожидается, что данная спецификация в конце концов заменит свойства, определённые во Flexbox Level One.

Перекрёстная ось

Свойства align-items и align-self управляют выравниванием flex элементов по перекрёстной оси: вертикальной для flex-direction установленным в row, и горизонтальной для flex-direction установленным в column .

Рассмотрим выравнивание по перекрёстной оси на простейшем примере. Если установить display: flex у контейнера, все дочерние элементы становятся flex элементами, выстроенными в ряд. Все они по вертикали примут размер самого высокого элемента, который станет определяющим вертикального размера. Если у flex контейнера задана высота, то все элементы растянутся до высоты контейнера, независимо от размера содержимого.

Все элементы становятся одной высоты, т.к. по умолчанию свойство align-items имеет значение stretch .

Другие возможные значения свойства:

• align-items: flex-start
• align-items: flex-end
• align-items: center
• align-items: stretch
• align-items: baseline

В примере ниже значение свойств align-items установлено в stretch . Попробуйте другие значения для понимания их действия.

Выравнивание одного элемента при помощи align-self

Свойство align-items устанавливает align-self для всех flex элементов как для группы. Это означает, что можно явно указать значение align-self для конкретного элемента. Свойство align-self может принимать все те же значения, что и свойство align-items , а так же значение auto , которое сбросит значение, установленное в flex контейнере.

В следующем примере, у flex контейнера установлено align-items: flex-start , означающее, что все элементы будут выравнены по началу перекрёстной оси. У первого элемента с помощью селектора first-child установлено align-self: stretch ; у следующего элемента с классом selected установлено align-self: center . Можно изменять значение align-items на контейнере или align-self на элементе для изучения их работы.8н

Изменение основной оси

До сего момента мы изучали поведение при flex-direction установленном в row , в языке, использующем написание сверху вниз. Это означает, что основная ось идёт горизонтально, а выравнивание по перекрёстной оси сдвигает элементы вверх или вниз.

Если изменить flex-direction на column, align-items и align-self будут сдвигать элементы влево или вправо.

Можно попробовать пример ниже, где установлено flex-direction: column .

Выравнивание содержимого по перекрёстной оси — свойство align-content

До сих пор мы выравнивали элементы внутри flex-контейнера. Если содержимое вашего flex контейнера переносится на несколько строк, используйте свойство align-content для управления свободным пространством между строками. В спецификации это описано как упаковка flex-строк.

Чтобы свойство align-content работало, необходимо, чтобы в flex-контейнере было больше места, что требуется для отображения всего содержимого. Оно применяется ко всем элементам как группе, и управляет распределением свободного места и положением всей группы элементов внутри контейнера.

Свойство align-content принимает следующие значения:

• align-content: flex-start
• align-content: flex-end
• align-content: center
• align-content: space-between
• align-content: space-around
• align-content: stretch
• align-content: space-evenly (не описано в спецификации Flexbox)

В примере ниже flex контейнер имеет высоту 400 пикселей — больше, чем необходимо для отображения всех элементов. Значение align-content установлено в space-between , означающее, что свободное пространство разделено между строками, расположенными вплотную к началу и концу контейнера по перекрёстной оси.

Попробуйте другие значения align-content для понимания принципа их работы.

Также можно сменить значение flex-direction на column и увидеть, как наше свойство работает в режиме колонок. Как и ранее, что увидеть работу свойства, у контейнера должно быть больше свободного места, чем требуется содержимому.

Примечание: значение space-evenly не определено в спецификации flexbox и добавлено позже в спецификацию Box Alignment. Поддержка браузерами этого значение не так широка, как значений определённым в спецификации flexbox.

В документации по justify-content на MDN приведено больше деталей о всех значениях и поддержке браузерами.

Выравнивание содержимого по главной оси

Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — justify-content . Это обусловлено тем, что с элементами на главной оси мы работаем только как с группой. Используя свойство justify-content , мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.

В нашем первом примере с использованием свойства display: flex , применённым к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство justify-content имеет начальное значение flex-start . Все свободное место располагается в конце контейнера.

Свойство justify-content может принимать те же самые значения, что и align-content .

• justify-content: flex-start
• justify-content: flex-end
• justify-content: center
• justify-content: space-between
• justify-content: space-around
• justify-content: stretch
• justify-content: space-evenly (не определено в спецификации Flexbox)

В примере ниже, свойству justify-content задано значение space-between . Все доступное пространство распределяется между элементами после их позиционирования в контейнере. Первый и последний элементы занимают положения в начале и в конце контейнера соответственно.

Если свойство flex-direction имеет значение column , то свойство justify-content распределит доступное пространство в контейнере между элементами.

Выравнивание и режим записи

Необходимо помнить, что при использовании свойств flex-start и flex-end элементы позиционируются в режиме записи. Если свойству justify-content задано значение start и стоит режим записи left-to-right (слева-направо), как в английском, то элементы выравниваются, начиная с левой стороны контейнера.

Однако, если задан режим записи right-to-left (справа-налево), как в арабском языке, то элементы будут выстраиваться с правой стороны контейнера.

В примере ниже свойству property задано значение rtl , которое изменяет порядок наших элементов. Вы можете удалить это свойство или изменить значение свойства justify-content , чтобы увидеть, как работает flexbox, когда отображение элементов начинается справа.

Выравнивание и гибкое-направление

Начальное положение элементов поменяется, если вы измените значение свойства flex-direction — например установите row-reverse вместо row .

В следующем примере заданы следующие свойства: flex-direction: row-reverse и justify-content: flex-end . В языках с параметром записи ltr все элементы будут отображаться с левой стороны. Попробуйте изменить свойство flex-direction: row-reverse на flex-direction: row . Вы увидите, что теперь элементы отображаются реверсивно.

Может показаться немного запутанным, но главное правило, которое необходимо запомнить – до тех пор, пока вы не измените свойство flex-direction , элементы контейнера выстраиваются в режиме записи вашего языка ( ltr или rtl ).

Вы можете сделать отображение элементов контейнера блочным, задав свойству flex-direction значение column . Свойство flex-start будет отображать элементы в столбец сверху вниз. Таким образом, первый элемент будет первым параграфом.

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

Использование авто отступов для выравнивания по главной оси

Так как элементы, расположенные на главной оси, обрабатываются как группа, свойства justify-items или justify-self становятся недоступными. Тем не менее, существует способ отделить конкретный элемент или группу элементов от остальных, используя внешний отступ margin со значением auto .

Распространённый пример — панель навигации, в которой отдельные важные элементы выровнены по правому краю, а основная группа элементов — по левому.

На первый взгляд может показаться, что этот пример использования свойства justify-self . Однако, рассмотрим следующий ниже пример. Имеется три элемента с одной стороны и два — с другой. Если бы мы могли использовать justify-self на элементе d, это также изменило бы выравнивание следующего элемента — e, что может противоречить первоначальному замыслу.

Вместо этого мы можем выбрать четвёртый элемент (d) и отделить его от первых трёх, задав ему значение auto для margin-left . Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом работает margin-right . Оба свойства со значениями auto отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.

В интерактивном примере ниже у нас имеется простой ряд из флекс-элементов и класс push с заданным margin-left: auto . Вы можете, например, попробовать удалить это значение или добавить класс другому элементу, чтобы увидеть, как работает этот метод.

Будущие функции выравнивания для Flexbox

В начале этой статьи объясняется, что свойства выравнивания, которые в настоящее время содержатся в спецификации Flexbox Level 1, также включены в спецификацию Box Alignment Level 3, которая в дальнейшем может расширить эти свойства и значения. Мы уже видели, как это произошло с введением значения space-evenly для свойств align-content и justify-content .

Выравнивание во Flexbox также включает в себя другие методы создания пространства между элементами, такие как column-gap and row-gap , как показано в макете CSS Grid Layout. Включение этих свойств в Box Alignment означает, что в будущем мы также сможем использовать column-gap и row-gap во Flexbox разметке. Это означает, что вам не нужно будет использовать отступы, чтобы создать пространство между элементами.

Моё предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье Box Alignment in Grid Layout, а также рассмотреть как выравнивание работает в этих спецификациях в статье Box Alignment Cheatsheet.

• Выравнивание Коробки
• Выравнивание Коробки в Flexbox (Гибкая Коробка)
• Выравнивание Коробки в Grid Layout (Макет Сетки)

Перенос, обрезка и ориентация текста в CSS

white-space – это свойство, с помощью которого можно указать браузеру как он должен обрабатывать пробелы в тексте.

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

Исходный HTML-текст, содержащий пробелы и переносы строк:

Как он отображается в браузере:

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

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

Это поведение браузера по умолчанию или иными словами, когда свойство white-space имеет значение normal .

Но это можно изменить, если установить white-space другие значения:

• nowrap – то же самое что и normal , но без автоматического переноса текста по символам пробела (то есть размещается в одну строку);
• pre – выводится так, как указано в HTML-документе (то есть сохраняются пробелы и переносы строк из HTML, автоматического переноса текста по пробелам нет);
• pre-wrap – похож на pre , но здесь текст при достижении границы элемента будет автоматически переносится на новую строку;
• pre-line – похож на pre-wrap , но здесь несколько подряд идущих пробелов заменяются на один;
• break-spaces – похож на pre-wrap , но отличается от него алгоритмом разбивки пробелов в конце строки.

Установка white-space: nowrap выведет весь текст в одну строку:

Свойство white-space: pre отображает текст так как он отформатирован в HTML (выделение желтым цветом сделано для наглядности):

Свойство white-space: pre-wrap в отличие от white-space: pre автоматически перенесёт текст, который не помещается в строку:

Свойство white-space: pre-line в отличие pre-wrap дополнительно ещё заменяет все подряд идущие пробелы на один:

Значение break-spaces делает тоже самое что pre-wrap . Отличаются они только тем, как выполняется обработка пробелов конце строки. Чтобы показать это более наглядно мы специально добавили много пробелов между словами «это» и «свойство».

Таким образом, при pre-wrap (верхняя часть картинки) они остаются у текущей строки и просто переполняют элемент. Значение break-spaces (нижняя часть картинки) делает это по-другому. Она оставляет в текущей строке столько пробелов сколько возможно до переполнения, а остальные переносит на следующую строку.

Обрезка текста (text-overflow)

CSS-свойство text-overflow предназначено для задания того, как должен обрезаться текст, который выходит за границу элемента. Оно работает только в том случае, если у элемента присутствуют свойства white-space: nowrap и overflow со значением hidden , scroll или auto .

Оно может принимать два значения:

• clip (по умолчанию) – обрезает текст по границе элемента;
• ellipsis – обрезает текст и отображает в его конце многоточие.

.item { white-space: nowrap; overflow: hidden; text-overflow: clip; /* просто с обрезкой */ text-overflow: ellipsis; /* с многоточием в конце */ }

Перенос слов при переполнении (overflow-wrap)

overflow-wrap – это CSS-свойство, которое позволяет указать необходимо ли переносить слова, выходящие за границы элемента. По умолчанию overflow-wrap имеет значение normal . Это означает, что слова могут разрываться только в определённых местах, например, когда имеется пробел или дефис.

Два других значения ( break-word и anywhere ) указывают браузеру, что он должен вставлять разрывы в неразрывную строку. При этом разрыв создается только в том случае, если всё слово не может быть помещено в отдельную строку без переполнения. В этом случае разорвано слово может быть на любом символе, если в ней нет других приемлемых точек разрыва.

.item-1 { overflow-wrap: normal; } .item-2 { overflow-wrap: anywhere; } .item-3 { overflow-wrap: break-word; }

Браузер, когда нам необходимо, чтобы контент занимал минимальную ширину ( width: min-content ), при установке overflow-wrap: anywhere может расставлять мягкие переносы на своё усмотрение:

.item-1 { width: min-content; overflow-wrap: anywhere; } .item-2 { width: min-content; overflow-wrap: break-word; }

Ещё один интересный пример с текстом в анинимном flex-элементе:

 
��‍♂️Я забыыыыыыыыыыыыыыыыл о свойстве, которое позволяет переносить слова, выходящие за границы элемента. 我忘記了允許您包裝超出元素邊界的單詞的屬性。
 
��‍♂️Я забыыыыыыыыыыыыыыыыл о свойстве, которое позволяет переносить слова, выходящие за границы элемента. 我忘記了允許您包裝超出元素邊界的單詞的屬性。
 

Переполнение при overflow-wrap: break-word происходит потому, что flex-элемент по умолчанию имеет в качестве минимальной ширины значение auto , то есть min-width: auto . Так как стилизиовать анонимный flex-элемент мы не можем, то чтобы исправить эту ситуацию, нам необходимо обернуть текст в какой-нибудь тег, например, и установить ему min-width: 0 :

 
 
��‍♂️Я забыыыыыыыыыыыыыыыыл о свойстве, которое позволяет переносить слова, выходящие за границы элемента. 我忘記了允許您包裝超出元素邊界的單詞的屬性。
 

В CSS, кроме overflow-wrap , имеются ещё следующие свойства: word-wrap и word-break .

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

.el { word-wrap: break-word; overflow-wrap: break-word; }

Свойство word-break определяет нужно ли разрывать слово при достижении границы родительского элемента. Данное свойство имеет следующие значения:

• normal (по умолчанию) – слова и строки с неразрывным пробелом могут разрываться только в определённых местах, например, когда имеется пробел или дефис;
• break-all – выполняет разрыв слова именно в том месте, в котором происходит переполнение, но только для текста не на китайском, японском и корейском языках (CJK);
• keep-all – запрещает перенос текста на китайском, японском или корейском языках (CJK), на других языках аналогично значению normal ;
• break-word (устаревшее, использовать не рекомендуется) – делает тоже самое, что и overflow-wrap: anywhere .

На практике значение keep-all может использоваться для корейского языка (в котором используются пробелы между словами), а также для текста со смешанным шрифтом, где фрагменты CJK смешиваются с другим языком, который использует пробелы для разделения. Значение break-all может применяться для текста, преимущественно состоящего из символов CJK с короткими выдержками, отличными от CJK.

Для разрыва строк текста на китайском, японском и корейском языках (CJK) имеется ещё свойство line-break . Оно определяет строгость правил разрыва строк и имеет следующие значения: auto (по умолчанию), loose , normal , strict и anywhere . Эти свойства ( word-break и line-break ) играют важную роль для текстов CJK.

Расстановка переносов (hyphens)

hyphens – это CSS-свойство, с помощью которого мы можем управлять расстановкой переносов через дефис в словах, когда строка переносится на несколько строк. С помощью него мы можем запретить расстановку переносов через дефис, разрешить её или выполнять только при наличии определенных символов.

Обратите внимание, что hyphens зависит от языка, который в HTML определяется атрибутом lang . Браузер будет расставлять переносы только в том случае, если атрибут lang присутствует в HTML-документе и в нём имеется соответствующий этому языку словарь для расстановки переносов.

Данное свойство имеет следующие значения:

• none – запретить расстановку переносов в словах через дефис;
• manual (по умолчанию) – слова будут переноситься через дефис только в местах, где проставлены символы ручного переноса ­ и ‐ ;
• auto – на усмотрение браузера, то есть в соответствии с символами ручного переноса и правилами на основе языка.

На практике очень частно свойство hyphens используется совместно с overflow-wrap . Рассмотрим следующий пример:

Я знаю свойство hyphens, которое позволяет нам 
Я знаю свойство hyphens, которое позволяет нам управ­лять расстановкой перено‐сов через дефис в словах, когда строка переносится на несколько строк.
 
Я знаю свойство hyphens, которое позволяет нам управ­лять расстановкой перено‐сов через дефис в словах, когда строка переносится на несколько строк.

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

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

Режимы письма (writing-mode)

Свойство writing-mode определяет:

• block flow direction, то есть направление потока, в котором будут складываться блоки внутри контейнера (это может быть сверху вниз, слева направо или справа налево);
• inline flow direction, то есть направление в котором контент (например, буквы и слова) будут двигаться внутри строк текста, а также где будет начинаться новая строка (оно может быть горизонтальным или вертикальным).

Свойство writing-mode может принимать следующие значения: horizontal-tb (значение по умолчанию), vertical-lr и vertical-rl .

Направление потока в котором движутся блоки:

• horizontal-tb – свеху вниз;
• vertical-lr – слева направо;
• vertical-rl – справа налево.

При этом inline-направление зависит не только от writing-mode , но и свойства direction . Здесь поток движется:

• слева направо при writing-mode: horizontal-tb и direction: ltr ;
• справа налево при writing-mode: horizontal-tb и direction: rtl ;
• сверху вниз при writing-mode: vertical-lr и direction: ltr ;
• снизу вверх при writing-mode: vertical-rl и direction: rtl.

  
First paragraph
 
Second paragraph
 
Third paragraph
 
.
 

Ориентация текста (text-orientation)

CSS-свойтство text-orientation позволяет настроить ориентацию текста внутри строки. Его необходимо использовать вместе с writing-mode . Свойство text-orientation будет работать только в том случае, если для writing-mode установлено значение vertical-rl или vertical-lr .

Свойство writing-mode может принимать следующие значения:

• mixed (по умолчанию) – символы горизонтальных шрифтов будут повёрнуты на 90 градусов по часовой стрелке, а вертикальных останутся без изменений;
• upright – символы отображаются в обычном виде (без поворота), но распологаются друг под другом (вертикально);
• sideways – символы располагаются так, как они располагались бы в горизонтальном режиме, но при повороте всей строки на 90° по часовой стрелке.

  
Этот абзац написан на русском языке.
 
この段落は日本語で書かれています