Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Добавляет доку про text-wrap #5445

Merged
merged 9 commits into from
Sep 20, 2024
Merged

Добавляет доку про text-wrap #5445

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
10ce1da
Добавляет text-wrap в Доку
nasty23-star Jul 17, 2024
1daf0a2
Добавила пустую строку
nasty23-star Jul 17, 2024
aa46bc1
Поменяла демку, редактировала немного текст
nasty23-star Jul 17, 2024
d7d7d56
Поправила пару неточностей
nasty23-star Jul 18, 2024
459d2bb
Полирует демку
skorobaeus Jul 22, 2024
b9723d3
Первый подход к редактуре
skorobaeus Jul 22, 2024
c83526d
Добавляет схему
skorobaeus Jul 22, 2024
0c3f847
Правки по замечаниям
nasty23-star Aug 8, 2024
bc99e50
Правки по замечаниям и предложениям
nasty23-star Sep 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 51 additions & 0 deletions css/text-wrap/demos/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="ru">

<head>
<title>Перенос для текста — text-wrap — Дока</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&display=swap">
<style>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background: cyan;
font-size: 16px;
font-weight: 700;
display: flex;
gap: 10px;
font-family: "Roboto", sans-serif;
}

.marty {
width: 100px;
height: 180px;
background: red;
text-wrap: wrap;

}

.emmet {
width: 100px;
height: 180px;
background: white;
text-wrap: nowrap;
}
</style>
</head>

<body>
<div class='marty'>Ты что, сделал машину времени… из DeLorean?</div>
<div class='emmet'>Я так понимаю: если уж делать машину времени, то делать со вкусом!</div>
</body>

</html>
58 changes: 58 additions & 0 deletions css/text-wrap/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
---
title: "`text-wrap`"
description: "Будет ли текст помещаться в границы контейнера?"
authors:
- anastasiayarosh
keywords:
- баланс переноса
related:
- css/text-align
- css/white-space
- css/word-wrap

tags:
- doka
- text
---
nasty23-star marked this conversation as resolved.
Show resolved Hide resolved

## Кратко

Свойство `text-wrap` это свойство CSS, которое контролирует как текст расположится внутри элемента. Например, можно применять для более сбалансированного вида заголовков, которые не вмещаются в одну строчку.

## Как пишется

Возможные значения:

- `wrap` — значение по умолчанию. Текст переносится по строкам через соответствующие символы (например, пробелы в таких языках, как английский, в которых используются пробельные разделители), чтобы минимизировать переполнение.
- `nowrap` — текст не переносится по строкам. Он переполнит содержащий его элемент, выйдя за пределы элемента, а не перейдет на новую строку.
- `balance` — Текст переносится таким образом, чтобы наилучшим образом сбалансировать количество символов в каждой строке, улучшая качество и разборчивость макета. Поскольку подсчет символов и их балансировка по нескольким строкам требует больших вычислительных затрат, это значение поддерживается только для блоков текста, охватывающих ограниченное количество строк (шесть или меньше для Chromium и десять или меньше для Firefox).
- `pretty` — результат будет таким же, как и при переносе, за исключением того, что пользовательский агент будет использовать более медленный алгоритм, который отдает предпочтение лучшему макету, а не скорости. Это предназначено для основного текста, где хорошая типографика предпочтительнее производительности.
- `stable` — результат аналогичен переносу, за исключением того, что когда пользователь редактирует содержимое, строки, которые идут перед редактируемыми строками, остаются статическими, а не весь блок переноса текста.

## Пример

```css
div {
text-wrap: wrap;
}
```

## Поддержка браузерами

Свойства wrap,nowrap и balance поддерживаются основными браузерами, pretty и stable не поддерживаются Safari и Firefox. Проверяйте поддержку на [Can I use](https://caniuse.com/text-size-adjust).


## Значение balance и pretty на производительность

Не рекомендуется применять свойство balance для текста ко всему дизайну. Это напрасный запрос из-за ограничения строк, и он может повлиять на скорость рендеринга страницы. Лучше применять его для заголовков, цитат и тд.

Свойство pretty не имеет таких ограничений.

## Взаимодействие значения balance со свойством white-space

Балансирующий текст конкурирует со свойством white-space поскольку одно требует отсутствия переноса, а другое — сбалансированного переноса. Чтобы преодолеть эту проблему, отключите свойство пробелов, после чего снова можно будет применить сбалансированную переноску.

## Значение balance и различные устройства

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

Loading