Атрибут width тега <pre> — довжина рядка в символах
автор: NagarD
Загальний опис
автор: NagarD
Синтаксис
<pre width="number">Атрибут width може отримувати єдине значення:
-
number -
Встановлює ширину в кількості символів
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
width на pre мав обмежувати рядок тридцятьма символами — браузери цього так і не втілили, і атрибут вилучено: обидва блоки однакові. Ширину обмежуй CSS-ом. Сам pre чесно зберігає всі пробіли і переноси.
<pre width="30">
Текст у pre зберігає пробіли
і переноси рядків.
</pre>
<pre>
Текст у pre зберігає пробіли
і переноси рядків.
</pre>Чотири блоки з тим самим рядком у сто знаків. Перший — без атрибутів, другий — із width="20": вони однакові, атрибут не робить нічого. Третій — сучасний перенос: max-width: 20ch разом із white-space: pre-wrap і overflow-wrap: break-word ріже рядок рівно по двадцять знаків. Четвертий — те, що частіше треба коду: overflow-x: auto, і блок прокручується вбік, не розсуваючи сторінку. П'ятий показує, чому третє правило обов'язкове.
HTML
<p class="head">1. Без атрибутів</p>
<pre>0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789</pre>
<p class="head">2. width="20" — той самий вигляд, атрибут не діє</p>
<pre width="20">0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789</pre>
<p class="head">3. max-width: 20ch + pre-wrap + break-word — рівно по 20 знаків</p>
<pre class="dvadtsyat">0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789</pre>
<p class="head">4. overflow-x: auto — прокрутка замість перенесення</p>
<pre class="prokrutka"><code>docker compose exec fpm-css php bin/console doctrine:migrations:migrate --no-interaction</code></pre>
<p class="head">5. Той самий рядок цифр без break-word — не переноситься зовсім</p>
<pre class="dvadtsyat bezlamu">0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789</pre>CSS
.head {
margin: 20px 0 6px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
pre {
max-width: 100%;
margin: 0;
padding: 8px 10px;
border: 2px solid #b9c6d8;
border-radius: 4px;
background: #f6f9ff;
}
.dvadtsyat {
max-width: 20ch;
overflow-wrap: break-word;
white-space: pre-wrap;
border-color: #3a9a4f;
background: #f3fbf4;
}
.bezlamu {
overflow-wrap: normal;
border-color: #d64545;
background: #fff4f4;
}
.prokrutka {
max-width: 320px;
overflow-x: auto;
border-color: #2f6fd0;
background: #eef3fb;
}Різниця між HTML 4.01 та HTML5
Атрибут width для тега <pre> не підтримується у HTML5. Користуйтесь для цього CSS.
Коментарі
Коментарів ще немає — будьте першим!