doka-guide · solarrust · Nov 15, 2024 · Oct 13, 2024 · Oct 18, 2024 · Oct 18, 2024
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+  <title>Пример значений — text-align-last — Дока</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&display=swap">
+  <style>
+    *,
+    *::before,
+    *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+      block-size: 100%;
+    }
+
+    body {
+      min-block-size: 100%;
+      padding: 50px;
+      display: grid;
+      place-items: center;
+      background-color: #18191c;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+      font-size: 16px;
+    }
+
+    code {
+      font-family: "Roboto Mono", monospace;
+      font-size: calc(1em - 1px);
+    }
+
+    h1 {
+      font-size: 26px;
+      font-weight: 500;
+      text-align: right;
+    }
+
+    .option-container {
+      display: flex;
+      align-items: flex-end;
+      margin-block-start: 30px;
+    }
+
+    .option-title {
+      margin-inline-end: 50px;
+      text-align: right;
+    }
+
+    h1,
+    .option-title {
+      inline-size: 180px;
+    }
+
+    .option {
+      inline-size: 340px;
+      padding: 35px 20px;
+      background-color: #2E9AFF;
+    }
+
+    mark {
+      background-color: #2E9AFF;
+    }
+
+    .left {
+      text-align-last: left;
+    }
+
+    .right {
+      text-align-last: right;
+    }
+
+    .center {
+      text-align-last: center;
+    }
+
+    .justify {
+      text-align-last: justify;
+    }
+
+    .start {
+      text-align-last: start;
+    }
+
+    .end {
+      text-align-last: end;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      .option-container {
+        display: block;
+        overflow: scroll;
+      }
+
+      h1,
+      .option-title {
+        inline-size: 100%;
+      }
+
+      .option-title {
+        display: block;
+        margin-inline-end: 0;
+        margin-block-end: 10px;
+      }
+
+      .option {
+        inline-size: calc(100vw - 60px);
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="parent">
+    <h1><code>text-align-last</code></h1>
+    <div class="option-container">
+      <span class="option-title"><code>left</code></span>
+      <p class="option left"><mark>Вытаяла возле бора тропинка сухая, и рядом с ней шумит ручей.</mark></p>
+    </div>
+    <div class="option-container">
+      <span class="option-title"><code>right</code></span>
+      <p class="option right"><mark>Вытаяла возле бора тропинка сухая, и рядом с ней шумит ручей.</mark></p>
+    </div>
+    <div class="option-container">
+      <span class="option-title"><code>center</code></span>
+      <p class="option center"><mark>Вытаяла возле бора тропинка сухая, и рядом с ней шумит ручей.</mark></p>
+    </div>
+    <div class="option-container">
+      <span class="option-title"><code>justify</code></span>
+      <p class="option justify"><mark>Вытаяла возле бора тропинка сухая, и рядом с ней шумит ручей.</mark></p>
+    </div>
+    <div class="option-container">
+      <span class="option-title"><code>start</code></span>
+      <p class="option start"><mark>Вытаяла возле бора тропинка сухая, и рядом с ней шумит ручей.</mark></p>
+    </div>
+    <div class="option-container">
+      <span class="option-title"><code>end</code></span>
+      <p class="option end"><mark>Вытаяла возле бора тропинка сухая, и рядом с ней шумит ручей.</mark></p>
+    </div>
+  </div>
+</body>
+
+</html>
@@ -0,0 +1,36 @@
+---
+title: "`text-align-last`"
+description: "Как сделать финальный аккорд стильным? Управляем выравниванием последней строки."
+authors:
+  - mbelinskaya
+related:
+  - css/top-left-right-bottom
+  - css/text-indent
+  - css/text-justify
+tags:
+  - doka
+---
+
+## Кратко
+
+`text-align-last` управляет выравниванием последней строки в блоке. Также работает для строк, которые заканчиваются принудительным переносом строки (например, перед тегом [`<br>`](/html/br/)).
+
+Если это свойство не задано, то выравнивание определяется правилами текущего языка (значение атрибута `lang` у тега [`<html>`](/html/html/)), либо значением свойства `direction` (`ltr` — слева направо, `rtl` — справа налево).
+
+## Как пишется
+
+- `auto` —  выравнивание, как и для остальных строк, кроме случая со значением `justify`, тогда строка будет выравниваться по тому краю, по которому принято в текущем языке (значение по умолчанию).
+- `start` — в ту же сторону, что и весь остальной текст.
+- `end` — в противоположную сторону от остального текста.
+- `left` — по левому краю.
+- `right` — по правому краю.
+- `center` — по центру.
+- `justify` — по ширине, чтобы заполнить всё пространство.
+
+<iframe title="Пример выравния строки каждым из способов" src="demos/text-align-last/" height="400"></iframe>
+
+## Подсказки
+
+💡 Не влияет на выравнивание остальных строк в блоке. Для этого используйте свойство [`text-align`](/css/text-align/).
+
+💡 Задаёт выравнивание для всех последних строк в выбранном элементе. Например, если у вас есть контейнер `<div>` с пятью абзацами в нём, выравнивание будет применяться к последней строке каждого из абзацев. Чтобы выровнять только последнюю строку последнего абзаца, используйте [`:last-child`](/css/child/) или [`:last-of-type`](/css/nth-of-type/).
diff --git a/people/mbelinskaya/index.md b/people/mbelinskaya/index.md
@@ -0,0 +1,6 @@
+---
+name: 'Мария Белинская'
+url: https://github.com/MBelinskaya
+badges:
+  - first-contribution-small
+---