Содержание

Значение тега и свойство white-space CSS



Тег <pre> обычно известен как»предварительно отформатированный текст».

Существует также свойство white-space CSS, которое обеспечивает pre-подобное поведение для любого тега. Однако на странице его описания в W3Schools и на странице спецификаций CSS3 это поведение описывается как»алгоритм предварительного обслуживания пространства». В той же спецификации есть только одно место, в котором ‘white-space’ упоминается как предварительно отформатированный текст.

Это чепуха или, может быть, <pre> изначально был сокращением для тега «preserving space»?

Какова предыстория этого тега? Я не профессиональный дизайнер HTML, я знаю, что означает обе версии, но я не знаю, как на нее ссылаются или ссылались люди. Является ли название ‘preserving space’ правильным техническим термином, который никто не использует?

html css
Поделиться Источник Andrey Chaschev     04 ноября 2013 в 09:38

3 ответа

  • IE10 не поддерживает white-space: pre-wrap?

    У меня есть тег pre в изменяемом размере div . И ширина pre будет растягиваться или сжиматься, когда пользователь расширяет или сжимает div . Если текст длиннее ширины pre , он будет разбит на следующую строку. Я использую этот CSS для предварительного: pre { white-space: pre-wrap; /* css-3 */…

  • <span> с «float: right» внутри » white-space: pre»

    Следующее HTML: <div style=white-space: pre> long time; <span style=float: right;>// know C?</span> </div> рендерится по-разному в WebKit и Gecko. С WebKit содержимое промежутка остается на той же строке, что и предыдущий текст, но с Gecko они перемещаются в новую строку….


2

Из двух ссылок, которые вы дали, W3Schools, вероятно, не самое лучшее место для такого достоверно точного определения, как это.

И хотя страница MDN, на которую вы ссылаетесь, является гораздо лучшим ресурсом, это

не официальная спецификация CSS3, как вы думаете; вы найдете официальную спецификацию по адресу http://www.w3.org/TR/CSS2/text. html#propdef-white-space

Если вы прочтете официальную спецификацию, то обнаружите, что поведение не описывается ни одной из фраз, упомянутых вами в вопросе. (Слово ‘preserved’ действительно появляется, но только в контексте новых строк).

Сам тег <pre> предшествует CSS; он был в очень ранних версиях HTML и был определен в них как «предварительно отформатированный текст», но с точки зрения CSS нет никакого конкретного значения буквам pre , кроме отсылки к поведению исходного элемента HTML этого имени.

Поделиться Spudley     04 ноября 2013 в 10:49


1

Ранние документы W3C, такие как гипертекст Markup язык — 2.0 (датируемый 1995 годом), все называют элемент <pre> предварительно отформатированным текстом .
Хотя некоторые файлы также ссылаются на то, что <pre> «сохраняет пробелы», они указывают, что это результат предварительного форматирования, а не предназначение этого элемента.
Например, в справочной спецификации HTML 3.2 говорится:

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

Поделиться Mr Lister     04 ноября 2013 в 10:39


0

Тег PRE был и используется для отображения текста с сохранением whitespace. Таким образом, текст не переносится, новые строки не игнорируются, пробелы не игнорируются.

Однако это можно отменить любым удобным для вас способом с помощью CSS (или Javascript).

Поделиться SPRBRN     04 ноября 2013 в 09:50

  • Использование CSS { white-space: nowrap } с Outlook

    В настоящее время у меня есть отчет с большим количеством широких столбцов, который я отправляю по электронной почте прямо из SQL. Я генерирую HTML для него динамически, но столкнулся с проблемой с шириной столбцов. Я вставил следующее CSS: #tableMain TH { text-align: center; white-space: pre;…

  • Как обернуть текст в тег pre в HTML?

    Я пытаюсь обернуть текст в свой предварительный тег в HTML, и это не работает. Я использую ниже CSS для своего тега. У меня ниже CSS от Как сделать Обтекание текстом в теге? pre { white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */ white-space: -pre-wrap; /* Opera */ white-space:…

Похожие вопросы:


Как достичь «white-space: pre;» в IE7?

Как достичь white-space: pre; в IE7?


Существует ли альтернатива свойству CSS white-space для использования в IE 7?

Я пытаюсь отобразить текст с разрывами строк в div, используя свойство css white-space со значением pre-line . Это работает, как и ожидалось, для Chrome, Firefox и IE 8, но не в IE 7. Например,…


Что делают пробел и -o-pre-wrap в CSS?

Мне нужна помощь в понимании этого фрагмента кода pre { white-space: pre; white-space: -moz-pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; width: 800px; overflow:…


IE10 не поддерживает white-space: pre-wrap?

У меня есть тег pre в изменяемом размере div . И ширина pre будет растягиваться или сжиматься, когда пользователь расширяет или сжимает div . Если текст длиннее ширины pre , он будет разбит на. ..


<span> с «float: right» внутри » white-space: pre»

Следующее HTML: <div style=white-space: pre> long time; <span style=float: right;>// know C?</span> </div> рендерится по-разному в WebKit и Gecko. С WebKit содержимое…


Использование CSS { white-space: nowrap } с Outlook

В настоящее время у меня есть отчет с большим количеством широких столбцов, который я отправляю по электронной почте прямо из SQL. Я генерирую HTML для него динамически, но столкнулся с проблемой с…


Как обернуть текст в тег pre в HTML?

Я пытаюсь обернуть текст в свой предварительный тег в HTML, и это не работает. Я использую ниже CSS для своего тега. У меня ниже CSS от Как сделать Обтекание текстом в теге? pre { white-space:…


Получение OSX Safari в честь css » white-space: pre»

У меня есть блог, где я использую ccs style= white-space: pre с элементами div. Я делаю это для отображения большого количества примеров кода или вывода cli в блоге. и придется скопировать и…


Как использовать свойство ‘white-space’ в fop xsl-fo?

Я использую FOP 2.2 для того, чтобы сгенерировать файл pdf из документов xml. FOP документация находится здесь http://xmlgraphics.apache.org/fop / Документ pdf генерируется нормально. Однако я…


Как сделать текстовые узлы с новыми строками в нем без использования «style=white-space: pre»?

Я пытаюсь получить textnode с новыми строками в нем (мой текст содержит \n и x0a ). я нашел способ сделать это, используя white-space: pre , и это работает, но проблема в том, что содержимое не…

HTML тег

Тег <pre> используется для включения в HTML-документ предварительно отформатированного текста. Во вложенном в тег тексте сохраняются все пробелы и разрывы строк (как известно, браузеры по умолчанию любое количество идущих подряд пробелов показывают как один). Тег <pre> используют для отображения программного кода, либо текста (например, стихотворения), где автор сам задал расположение строк относительно друг друга.

Содержимое тега отображается в браузере моноширинным шрифтом (шрифт, в котором все знаки имеют одинаковую ширину).

В тег <pre> можно вкладывать любые элементы за исключением тегов <big>, <img>, <object>, <small>, <sub> и <sup>.

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

Синтаксис¶

Тег парный, содержимое пишется между открывающим () и закрывающим () тегами.

Пример¶

<!DOCTYPE html>
<html>
   <head>
      <title>Заголовок окна веб-страницы</title>
   </head>
   <body>
       <pre>Крошка сын
               к отцу пришёл,
               и спросила кроха:
               — Что такое 
                хорошо
                и что такое 
                плохо? —</pre>
   </body>
</html>
Попробуйте сами!

Результат¶

Если вам необходимо вставить в HTML документ блок с кодом, используйте для этого тег <code>, вложенный в элемент. В этом случае поисковые роботы, программы, читающие с экрана сразу поймут, что они имеют дело с программным кодом.

Пример¶

 
<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <pre>
      <code>
        body {
          color:orange;
        }
      </code>
    </pre>
  </body>
</html>
Попробуйте сами!

Результат¶

Атрибуты¶

Тег <pre> поддерживает также глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <pre> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <pre>:

Цвет текста внутри тега <pre>:

Стили форматирования текста для тега <pre>:

Другие свойства для тега <pre>:

Поддержка браузера


Группировка содержимого в HTML5

HTML-элементы для группировки содержимого веб-страниц

1. Элемент <p>

Категории контента: потоковое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: закрывающий тег элемента

<p> может быть пропущен, если сразу за ним следует <address>, <article>, <aside>, <blockquote>, <details>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <header>, <hr>, <main>, <nav>, <ol>, <p>, <pre>, <section>, <table> или <ul> элемент, или если в родительском элементе больше нет содержимого, а родительский элемент не является <a>, <audio>, <del>, <ins>, <map>, <noscript> или <video>.

Для элемента доступны ‎глобальные атрибуты.

Элемент <p> представляет абзац. Абзацы — это блоки текста, физически отделенные от смежных блоков пустыми строками.

<p>Маленький котенок осторожно уселся на кусок ковра. Позже в его жизни это будет упоминаться как время, когда кошка сидела на коврике.</p>
<fieldset>
  <legend>Персональная информация</legend>
  <p>
    <label>Имя: <input name="n"></label>
    <label><input name="anon" type="checkbox"> Скрыть от других пользователей</label>
  </p>
  <p><label>Адрес: <textarea name="a"></textarea></label></p>
</fieldset>

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

<section>
  ...
  <p>Последнее изменение: 2001-04-23</p>
  <p>Автор: [email protected]</p>
</section>

Тем не менее, это было бы лучше разметить как:

<section>
  ...
  <footer>Последнее изменение: 2001-04-23</footer>
  <address>Автор: [email protected]</address>
</section>

Или так:

<section>
  ...
  <footer>
  <p>Последнее изменение: 2001-04-23</p>
  <address>Автор: [email protected]</address>
  </footer>
</section>

Элементы списка (в частности, элементы <ol> и <ul>) не могут быть дочерними элементами <p>. Поэтому, когда предложение содержит маркированный список, его можно разметить следующим образом:

<p>Например, в этом фантастическом предложении есть элементы маркированного списка, относящиеся к</p>
<ul>
  <li>волшебникам,
  <li>путешествию быстрее скорости света,
  <li>телепатии,
</ul>
<p>и это обсуждается ниже. </p>

2. Элемент <address>

Категории контента: потоковое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

Элемент <address> представляет контактную информацию о человеке или организации. Он должен включать физическое и / или цифровое местоположение / контактную информацию и средства идентификации лица (лиц) или организации, к которой относится эта информация. В браузере обычно отображается курсивом.

Например, твиттер-аккаунт W3C:

<address>
<p>W3C в Twitter:
<p><a href="https://twitter.com/w3c">@w3c</a>
</address>

Адрес, телефон и факс организации:

<address>      
Центральный офис АО «Почта России»<br>
131000, Москва, Варшавское шоссе, 37<br>
Тел.: +7 (495) 956-20-67 | Факс: +7 (495) 956-99-51
</address>

3. Элемент <hr>

Категории контента: потоковое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: отсутствует закрывающий тег.

Для элемента доступны ‎глобальные атрибуты.

Элемент <hr> представляет собой тематический разрыв на уровне абзаца, например, изменение сцены в рассказе или переход к другой теме в разделе справочника.

<section>
<h2>Общение</h2>
<p>Существуют различные способы общения. Этот раздел охватывает несколько важных, используемых проектом.</p>
<hr>
<p>Камни связи, кажется, приходят парами и имеют загадочные свойства:</p>
<ul>
  <li>Они могут передавать мысли в двух направлениях после активации, если используются в одиночку. </li>
  <li>Если оба камня используются с другим устройством, сознание переключается на другое тело.</li>
</ul>
<hr>
<p>Радиоприемники используют электромагнитный спектр в метровом диапазоне и дольше.</p>
<hr>
<p>Сигнальные вспышки используют электромагнитный спектр в нанометровом диапазоне.</p>
</section>

Нет необходимости в элементе <hr> между разделами, поскольку элементы <section> и элементы <h2> сами подразумевают смену тематики.

Элемент <hr> не влияет на структуру документа.

4. Элемент <pre>

Категории контента: потоковое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

Элемент <pre> представляет собой блок предварительно отформатированного текста, в котором структура представлена типографскими соглашениями, а не элементами.

В синтаксисе HTML ведущий символ новой строки, следующий сразу за начальным тегом <pre>, удаляется.

Для представления блока компьютерного кода, элемент <pre> может использоваться с элементом <code>. Для представления результата выполнения программного кода или скрипта элемент <pre> может использоваться с элементом <samp>. Аналогично, элемент <kbd> может использоваться в элементе <pre> для указания текста, который должен ввести пользователь.

<p>Это конструктор <code>Panel</code>:</p>
<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this. closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>

5. Элемент <blockquote>

Категории контента: потоковое содержимое, корневой секционный, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты и необязательный атрибут cite, содержащий ссылку на источник цитаты. Браузеры могут разрешать пользователям переходить по таким ссылкам, но они в первую очередь предназначены для частного использования (например, серверными скриптами, собирающими статистику использования цитат сайта), а не для читателей.

Элемент <blockquote> представляет содержимое, цитируемое из другого источника, необязательно со ссылкой на источник цитирования, которая указывается в элементе <footer> или <cite>, и, необязательно, с изменениями по тексту, такими как аннотации и сокращения.

<blockquote>
  <p>От перца, верно, начинают всем перечить... От уксуса - куксятся, от горчицы - огорчаются, от лука - лукавят, от вина - винятся, а от сдобы - добреют. Как жалко, что никто об этом не знает... Всё было бы так просто! Ели бы сдобу и добрели!</p>
  <cite>Льюис Кэрролл. Приключения Алисы в Стране чудес</cite>
</blockquote>
<blockquote>
  <p>Моя любимая книга <cite>"О водоплавающих"</cite></p>
  <footer>- <cite>Майк Смит</cite></footer>
</blockquote>

6. Элемент <ol>

Категории контента: потоковое содержимое. Если содержит хотя бы один элемент <li> — видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты, а также атрибуты, приведенные в таблице ниже:

Таблица 1. Атрибуты элемента <ol>
АтрибутОписание, принимаемое значение
reversedЛогический атрибут. Если присутствует, это означает, что список является нисходящим (…, 3, 2, 1). Если атрибут опущен, список является восходящим (1, 2, 3, …).
startЦелое число, задающее порядковый номер первого элемента списка. По умолчанию равно 1 (если отсутствует атрибут reversed).
typeИспользуется для указания типа маркера, по умолчанию используется десятичная нумерация. Принимаемые значения:
1 — десятичная нумерация.
A — нумерация списка в алфавитном порядке, прописные буквы латинского алфавита (A, B, C, D).
a — нумерация списка в алфавитном порядке, строчные буквы латинского алфавита (a, b, c, d).
I — нумерация римскими заглавными цифрами (I, II, III, IV).
i — нумерация римскими строчными цифрами (i, ii, iii, iv).

Элемент <ol> представляет собой список элементов, где элементы были изначально упорядочены таким образом, что изменение порядка изменило бы смысл документа. Элементами списка являются элементы <li>.

<p>Я жил в следующих странах (приведено в порядке, когда я впервые жил там):</p>
<ol>
  <li>Швейцария
  <li>Великобритания
  <li>США
  <li>Норвегия
</ol>

7. Элемент <ul>

Категории контента: потоковое содержимое. Если содержит хотя бы один элемент <li> — видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

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

<p>Я жил в следующих странах:</p>
<ul>
  <li>Швейцария
  <li>Великобритания
  <li>США
  <li>Норвегия
</ul>

8. Элемент <li>

Категории контента: отсутствуют.

Контекст, в котором этот элемент может быть использован: внутри элемента <ol> и <ul>.

Пропуск тегов: закрывающий тег </li> может быть опущен, если элемент <li> сразу следует за другим элементом <li>, или если больше нет содержания в элементе, в который вложен тег.

Для элемента доступны ‎глобальные атрибуты. Если элемент является дочерним элементом <ol> — необязательный атрибут value.

Элемент <li> представляет собой элемент списка. Если родительским элементом является элемент <ol>, то элемент <li> имеет порядковый номер.

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

<figure>
  <figcaption>Топ 10 фильмов всех времен</figcaption>
  <ol>
      <li value="10"><cite>Джози и кошечки</cite>, 2001</li>
      <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
      <li value="8"><cite>Приключения Флика</cite>, 1998</li>
      <li value="7"><cite>История игрушек</cite>, 1995</li>
      <li value="6"><cite>Корпорация монстров</cite>, 2001</li>
      <li value="5"><cite>Тачки</cite>, 2006</li>
      <li value="4"><cite>История игрушек 2</cite>, 1999</li>
      <li value="3"><cite>В поисках Немо</cite>, 2003</li>
      <li value="2"><cite>Суперсемейка</cite>, 2004</li>
      <li value="1"><cite>Рататуй</cite>, 2007</li>
  </ol>
</figure>

9.

Элемент <dl>

Категории контента: потоковое содержимое. Если имеется хотя бы одна пара <dt>—<dd> — видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

Элемент <dl> представляет список описаний, состоящий из нуля или более групп термин-описание. Термин представлен элементом <dt>, описание — элементом <dd>.

Группы термин-описание могут быть терминами и определениями, вопросами и ответами, категориями и темами и т.п.

<dl>
  <dt>Текила «Бланко»</dt>
  <dd>Кристально прозрачная текила с медовым вкусом спелой агавы...</dd>
  <dt>Текила «Репосадо»</dt>
  <dd>Текила, выдержанная в бочках из белого дуба в течение 8-10 месяцев...</dd>
</dl>

10. Элемент <dt>

Категории контента: отсутствуют.

Контекст, в котором этот элемент может быть использован: перед элементами <dd> или <dt> внутри элементов <dl>.

Пропуск тегов: закрывающий тег элемента <dt> может быть опущен, если за элементом <dt> сразу же следует другой элемент <dt> или элемент <dd>.

Для элемента доступны ‎глобальные атрибуты.

Элемент <dt> представляет термин в списке описаний <dl>.

При использовании в элементе <dl> элемент <dt> не обязательно представляет определяемый термин. Для этой цели можно использовать элемент <dfn>.

<dl>
  <dt lang="en-us"><dfn>Color</dfn></dt>
  <dt lang="en-gb"><dfn>Colour</dfn></dt>
  <dd>A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three
        differently filtered analyses of a view. </dd>
</dl>

11. Элемент <dd>

Категории контента: отсутствуют.

Контекст, в котором этот элемент может быть использован: после элементов <dt> или <dd> внутри элементов <dl>.

Пропуск тегов: закрывающий тег элемента <dd> может быть опущен, если за элементом <dd> сразу же следует другой элемент <dd> или элемент <dt> или если в родительском элементе больше нет содержимого.

Для элемента доступны ‎глобальные атрибуты.

Элемент <dd> представляет описание в списке описаний <dl>.

12. Элемент <figure>

Категории контента: потоковое содержимое, корневой секционный, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Элемент <figure> представляет автономное содержимое (необязательно с подписью), являющееся самостоятельным элементом основного потока. С помощью элемента <figure> можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д.

<figure>
    <img src="picture.jpg" alt="Осень">
    <figcaption>Осенний лес</figcaption>
</figure>

Когда на <figure> ссылаются из основного содержимого документа, идентифицируя его по заголовку (например, по номеру рисунка), это позволяет легко перемещать такое содержимое из основного содержимого, например, в боковую колонку или приложение, не затрагивая поток документа.

Стили браузеров по умолчанию для элемента <figure>:


display: block;
margin-left: 40px;
margin-right: 40px;
margin-top: 1em;
margin-bottom: 1em;

Для элемента доступны ‎глобальные атрибуты.

13. Элемент <figcaption>

Категории контента: отсутствуют.

Контекст, в котором этот элемент может быть использован: как потомок элемента <figure>.

Пропуск тегов: ни один из тегов не может быть пропущен.

Элемент <figcaption> представляет заголовок или легенду для остального содержимого родительского элемента <figure>.

Для элемента доступны ‎глобальные атрибуты.

14. Элемент <main>

Категории контента: потоковое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое; не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

Элемент <main> включает основное содержимое элемента <body> документа или приложения и исключает содержимое, которое повторяется на страницах сайта/приложения, таких как ссылки для навигации по сайту, информация об авторских правах, логотипы сайта и баннеры, а также поисковые формы (за исключением случаев, когда основной функцией документа или приложения является поисковая форма).

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

В документе должно быть не более одного элемента <main>.

<body>
<header>
  <h2>Пудель</h2>
    <nav>
      <ul>
        <li><a href="index.html">Главная</a></li>
        <li><a href="about.html">О породе</a></li>
        <li><a href="health.html">Здоровье</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <header>
        <h3>О породе</h3>
          <nav>
            <ul>
              <li><a href="#basic">Разновидности</a></li>
              <li><a href="#app">Внешний вид</a></li>
              <li><a href="#temp">Характер</a></li>
            </ul>
          </nav>
      </header>
      <section>
        <h4>Разновидности</h4>
          <p>. ..</p>
      </section>
      <section>
        <h4>Внешний вид</h4>
          <p>...</p>
      </section>
      <section>
        <h4>Характер</h4>
          <p>...</p>
      </section>
      <footer>
        <a href="#basic">Разновидности</a>
        <a href="#app">Внешний вид</a>
        <a href="#temp">Характер</a>
      </footer>
      </section>
    </main>
    <footer>
      <small>Copyright © <time datetime="2016">2016</time> Моя собака.ру</small>
    </footer>
</body>

15. <div>

Категории контента: потоковое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое; как дочерний элемент <dl>.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

Элемент <div> сам по себе ничего не значит. Он представляет свои дочерние элементы. Может использоваться с атрибутами class, lang и title для разметки семантики, общей для группы последовательных элементов.

Рекомендуется использовать элемент <div> в случаях, когда другой элемент не подходит. Использование более подходящих элементов вместо элемента <div> обеспечивает лучшую доступность для читателей и облегчает обслуживание кода.

С другой стороны, элемент <div> может быть полезны для стилистических целей или для обертывания нескольких абзацев внутри раздела, имеющих общие свойства. В примере ниже мы видим элемент <div>, используемый в качестве способа задания языка двух абзацев сразу, вместо того чтобы устанавливать язык для двух элементов абзаца отдельно:

<article lang="en-US">
  <h3>My use of language and my cats</h3>
  <p>My cat’s behavior hasn’t changed much since her absence, except that she plays her new physique to the neighbors regularly, in an attempt to get pets. </p>
  <div lang="en-GB">
     <p>My other cat, colored black and white, is a sweetie. He followed us to the pool today, walking down the pavement with us. Yesterday he apparently visited our neighbours. I wonder if he recognizes that their flat is a mirror image of ours.</p>
     <p>Hm, I just noticed that in the last paragraph I used British English. But I’m supposed to write in American English. So I shouldn’t say "pavement" or "flat" or "color"...</p>
  </div>
  <p>I should say "sidewalk" and "apartment" and "color"!</p>
</article>

По материалам Grouping content

CSS свойство белого пространства


Пример

Продемонстрируйте различные значения свойства white-space:

p.a {
white-space: nowrap;
}

p.b {
пробел: нормальный;
}

пк {
пустое пространство: предварительно;
}

Попробуй сам »

Определение и использование

Свойство white-space определяет, как обрабатывается белое пространство внутри элемента.

Значение по умолчанию: нормальный
Унаследовано: да
Анимируемое: нет.Прочитать о animatable
Версия: CSS1
Синтаксис JavaScript: объект .style.whiteSpace = «nowrap» Попытайся

Поддержка браузера

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

Объект
белое пространство 1. 0 8,0 3,5 3,0 9,5

Синтаксис CSS

пробел: нормальный | nowrap | pre | pre-line | pre-wrap | initial | наследовать;

Стоимость недвижимости

Значение Описание Сыграй
нормальный Последовательности пробелов сведутся к одному пробелу.При необходимости текст будет перенесен. Это значение по умолчанию Играй »
nowrap Последовательности пробелов сведутся к одному пробелу. Текст никогда не переносится на следующую строку. Текст продолжается в той же строке до тех пор, пока обнаружен тег
Играй »
до Пробел сохраняется браузером. Текст будет переноситься только на перенос строки.Действует как Тег
 в HTML
Играй »
предварительная линия Последовательности пробелов сведутся к одному пробелу. Текст будет переноситься при необходимости и при переносе строки Играй »
предварительная упаковка Пробел сохраняется браузером. Текст будет переноситься при необходимости и при переносе строки Играй »
начальный Устанавливает для этого свойства значение по умолчанию.Читать о начальная Играй »
наследовать Наследует это свойство от своего родительского элемента. Читать про наследство

связанные страницы

Учебник

CSS: Текст CSS

Ссылка на HTML DOM: свойство whiteSpace



: элемент предварительно отформатированного текста - HTML: язык разметки гипертекста

Элемент HTML 

   представляет предварительно отформатированный текст, который должен быть представлен точно так, как написано в файле HTML. Текст обычно отображается с использованием непропорционального («моноширинного») шрифта. Пробел внутри этого элемента отображается так, как написано. 




 
 Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос. 


 
 Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https: // github.com / mdn / interactive-examples и отправьте нам запрос на перенос. 


 
 Этот элемент включает только глобальные атрибуты. 


 
 
   cols   Этот API не стандартизирован. Это устаревший API, работа которого больше не гарантируется. 

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

  
   ширина   Это устаревший API, работа которого больше не гарантируется.

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

  
   wrap   Этот API не стандартизирован. 

  
 Это подсказка  , указывающая, как должно происходить переполнение. В современном браузере эта подсказка игнорируется, и визуальный эффект в ней отсутствует; для достижения такого эффекта используйте вместо этого CSS  пробел .

 
  
 HTML 
  
  
 Использовать CSS для изменения цвета шрифта очень просто. 


тело {
  красный цвет;
}

 
 Результат 
 Важно предоставить альтернативное описание для любых изображений или диаграмм, созданных с использованием предварительно отформатированного текста. Альтернативное описание должно четко и кратко описывать содержание изображения или диаграммы.
 Люди с ослабленным зрением и просматривающие сайты с помощью вспомогательных технологий, таких как программы чтения с экрана, могут не понимать, что представляют собой предварительно отформатированные текстовые символы, когда они читаются последовательно.
 Комбинация элементов 
  и 
 , дополненная комбинацией  id  и атрибутов ARIA  role  и  aria-labelledby , позволяет объявить предварительно отформатированный текст как изображение , с  figcaption , служащим альтернативным описанием изображения.
 Пример 
 

  
  ___________________________
<Я специалист в своей области.\ (оо) \ _______
             (__) \) \ / \
                 || ---- w |
                 || ||
  
 Корова говорит: «Я специалист в своей области». Корова изображена с использованием предварительно отформатированных текстовых символов.
 
 таблиц BCD загружаются только в браузере
 Как сделать предварительные теги на 100% адаптивными в CSS - Techstacker 
 Узнайте, как быстро сделать предварительные теги HTML на 100% отзывчивыми, добавив пару свойств CSS.
 Проблема, которую я часто вижу на других обучающих веб-сайтах, заключается в том, что длинные фрагменты кода (которые заключены в теги с  до ) выходят за пределы ширины страницы и вызывают нарушение макета страницы.
 Это происходит потому, что по умолчанию теги  до  имеют свойство CSS  white-space , установленное на  нормальный , например:
  pre {
  пробел: нормальный;
}  
 Чтобы решить эту проблему, просто измените  normal  на  pre-wrap :
  pre {
  белое пространство: предварительная упаковка;
}  
 Это большое улучшение, но это не решает проблему переполнения полностью, потому что  pre-wrap  адресует только целые строки кода (набор терминов кода в строке, разделенных пробелом).
 Что произойдет, если отдельные слова в ваших строках кода будут настолько длинными, что выходят за пределы ширины вашей страницы?
 Тогда ваш макет все равно не работает, потому что  pre-wrap  не обрабатывает отдельные слова.
 Хорошим примером является путь к каталогу, длина которого может легко превышать 50 символов, что слишком велико для многих макетов, особенно на мобильных устройствах. Вот пример с моего компьютера:
  cd / Users / david / Dev / techstacker / content / posts / how-to-make-seo-friendly-urls / how-to-make-seo-friendly-urls.мкр  
 Поскольку в строке выше нет пробелов между словами, браузер воспринимает его как  одно длинное слово . Если бы оно было разделено пробелами между каждым словом, оно было бы просто перенесено из-за свойства  pre-wrap , которое мы только что обсудили. Но читается это как одно длинное слово.
 Чтобы исправить эту проблему, мы добавляем еще одно свойство CSS к тегу pre, называемое  разрыв слова , и присваиваем ему значение  break-all . Как это:
  pre {
  белое пространство: предварительная упаковка;
  слово-разрыв: сломать все;
}  
 Теперь ваши предварительные теги на 100% отзывчивы.
 CSS white-space Свойство | DigitalOcean 
 Хотя в этом руководстве содержится контент, который, по нашему мнению, принесет большую пользу нашему сообществу, мы еще не тестировали или
 отредактировал его, чтобы обеспечить безошибочное обучение. Это в нашем списке, и мы над этим работаем!
 Вы можете помочь нам, нажав кнопку «сообщить о проблеме» в нижней части руководства.
 white-space - это свойство CSS, которое помогает управлять обработкой пробелов и разрывов строк в тексте элемента.
 Свойство  white-space  может принимать следующие значения:
  •  нормальный: значение по умолчанию. Несколько пробелов сворачиваются в один. При необходимости текст переносится на следующую строку.
  •  nowrap: несколько пробелов объединяются в один, но текст не переносится на следующую строку. Мы уже обсуждали, как использовать значение nowrap для предотвращения разрывов строк.
  •  pre: те же результаты, что и при использовании
    , где все пробелы будут сохранены как есть, а текст будет переноситься только тогда, когда в содержимом есть разрывы строк.
    • 
 
  •  перед строкой: несколько пробелов сворачиваются в один, текст переносится на следующую строку при необходимости или с переносами строк в содержимом. 
    • 
 
  •  pre-wrap: аналогично pre, но текст также переносится при необходимости. 
    • 
 
  
 белое пространство: нормальное 
 

 
 Медузафиш-полосатая морская собачка, сайра, белуга, белуга. Индийский лосось Mul mora cisco masu, петушиная акула-реквием, длинноносая, ланцетная рыба, синяя рыба, красный окунь Сакраменто, двустворчатый гигантский данио.


  
 белое пространство: nowrap 
 

 
 Медузафиш-полосатая морская собачка, сайра, белуга, белуга. Индийский лосось Mul mora cisco masu, петушиная акула-реквием, длинноносая, ланцетная рыба, синяя рыба, красный окунь Сакраменто, двустворчатый гигантский данио. 


  
 белое пространство: до 
 

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


 

Медузафиш полосатая киллифиш каторжная собачка сайра нитхвост белуга осетр.Индийский Mul mora cisco masu, лосось, петух-реквием, акула, ланцет, ланцет, красный

луциан Сакраменто, гигантский двуногий данио. 


  
 предварительная линия 
 

 
 Здесь текст прерывается при необходимости, но я также вручную сломал несколько последних слов. Я добавил те же лишние пробелы, но теперь они свернуты. 


 
 Медузафиш-полосатая морская собачка, сайра, белуга, белуга. Индийский лосось Mul mora cisco masu, петушиная акула-реквием, длинноносая, ланцетная рыба, синяя рыба, красный окунь Сакраменто, двустворчатый гигантский данио. 


  
 предварительная упаковка 
 

 
 Теперь лишние пробелы не удаляются. 


 
 Медузафиш-полосатая морская собачка, сайра, белуга, белуга. Индийский лосось Mul mora cisco masu, петушиная акула-реквием, длинноносая, ланцетная рыба, синяя рыба, красный окунь Сакраменто, двустворчатый гигантский данио. 


  
 Как добавить JS / CSS до / после кампании - VWO 
  
 Код JS / CSS кампании запускается на всех страницах, включенных в тест для всех вариантов и контроля. Используя VWO, вы можете добавить два типа фрагментов кода JavaScript: JS после кампании и JS перед кампанией.

 
 Некоторые распространенные варианты использования кода Campaign или Global JS в VWO включают: 

 
     
  • 
 
     Отправка данных кампании VWO в инструменты аналитики 
    
 
    • 
 
  • 
 
     Отслеживание пользовательских целей конверсии (с использованием JS до начала кампании) 
    
 
    • 
 
  • 
 
     Определите функцию JS для захвата варианта, обслуживаемого посетителем, и затем активируйте соответствующий вариант виджета опроса / уведомления 
    
 
    • 
 
 
 Чтобы добавить JS / CSS на уровне кампании, щелкните  Campaign JS / CSS  в правом верхнем углу редактора.

 
 

  
 
 JS после проведения кампании   
 
 Это режим по умолчанию, когда вы выбираете параметр  Campaign JS / CSS . Здесь вы можете определить код JS, который должен выполнить VWO после выполнения кода кампании на странице. 

 
 Чтобы добавить JS после кампании, выберите вариант, который нужно отредактировать, и затем щелкните  Код  в визуальном редакторе VWO. 

 
 

 
  ПРИМЕЧАНИЕ:  JS после кампании будет запускаться только на URL-адресах, которые включены в раздел 
  Settings >  URLs  section в тесте.
 В разделе  Campaign JS / CSS  введите код JavaScript, который вы хотите добавить, чтобы внести изменения во все варианты и контроль ваших тестовых страниц.
 Чтобы добавить собственный CSS на веб-сайт, выберите  CSS >  Включить внешнюю таблицу стилей .
 Введите URL-адрес CSS, который вы хотите включить. Чтобы использовать некоторые общеизвестные библиотеки CSS, выберите вариант из списка  Quick Add  и затем щелкните  DONE .
 Если вы хотите внести изменения на свой веб-сайт, добавив компоненты по их собственному коду, используйте раздел  Редактировать код >  HTML  редактора VWO. Вы можете написать код с нуля или быстро повторно использовать любой уже разработанный компонент веб-сайта.
 Для получения дополнительной информации см. Добавление HTML с помощью редактора VWO.
 Предварительная кампания 
 Вы можете добавить код JavaScript / CSS на страницы своей кампании, чтобы указать, что VWO должен запустить код на странице, прежде чем вносить какие-либо изменения в варианты.Он позволяет запускать пользовательские цели конверсии без изменения кодовой базы всего веб-сайта.
 Чтобы добавить код JS / CSS перед началом кампании, нажмите  Campaign JS / CSS  в правом верхнем углу окна редактора кода, а затем выберите  JavaScript >  Define Pre-Campaign JS. 
 Добавьте код JS перед началом кампании на правой панели окна. На левой панели введите глобальный JS-код / ​​код после кампании, который вы хотите выполнить после применения изменений.
 Если вы выбрали режим «Только код» для редактора, нажмите  Настройки  на вкладке JavaScript и выберите  Добавить предварительную кампанию JS .
 Чтобы применить изменения, нажмите  ГОТОВО .
  ПРИМЕЧАНИЕ : JS перед кампанией выполняется на URL, определенных в тесте, и любых 
 целевых URL, включенных в тест. 
 Предварительно рассчитанные разрывы строк для HTML / CSS 
 Несмотря на постепенное улучшение, типографика на веб-страницах имеет значительно более низкое качество, чем высококачественная типографика для печати / PDF, например, созданная L  a  T  e  X или Adobe InDesign.В частности, необходимо значительно улучшить перенос строк и расстановку переносов. В то время как CSS изначально никогда не указывал, какой алгоритм разрыва строки следует использовать, все браузеры сошлись на жадном разрыве строк, который дает некачественную типографику, но работает быстро, просто и стабильно. CSS Text Module Level 4 стандартизирует текущее поведение по умолчанию с помощью свойства  text-wrap  и вводит параметр  pretty , который указывает браузеру использовать более качественный алгоритм разрыва строки.Однако на момент написания ни один из браузеров не поддерживал это свойство. 
 Недавно я наткнулся на библиотеку CSS для эмуляции внешнего вида L ,  T  и  X по умолчанию.  1  Однако он не эмулирует алгоритм разрыва линии Кнута – Пласса, который является одним из факторов, благодаря которым L  a  T  e  X выглядит хорошо. Это заставило меня задуматься, можно ли имитировать это с помощью простого HTML и CSS. Библиотека JavaScript уже существует для эмуляции этого, но она добавляет дополнительную сложность и работает немного медленнее.Оказывается, можно предварительно рассчитать разрывы строк и расстановку переносов для определенной ширины столбцов способом, который может быть закодирован в HTML и CSS, если веб-шрифты используются для стандартизации внешнего вида текста в различных браузерах.
 Ключ состоит в том, чтобы обернуть все потенциальные разрывы строк (вставленные через  :: после псевдоэлементов ) и дефисы в элементах   , которые по умолчанию скрыты с помощью  display: none; . Затем мультимедийные запросы используются для выборочного отображения разрывов строк, относящихся к заданной ширине столбца.Поскольку каждая строка имеет явный разрыв строки, необходимо включить выравнивание с помощью  text-align-last: justify;  и  интервал между словами: -10 пикселей;  используется, чтобы избежать дополнительных автоматических разрывов строк из-за небольших различий в форматировании между браузерами. Однако это представляет проблему для фактической последней строки каждого абзаца, поскольку теперь она также выровнена по ширине, а не по левому краю. Это решается заключением каждой возможной последней строки в элемент   . Используя медиа-запросы, элемент   , соответствующий заданной ширине столбца, настраивается на использование  display: flex; , что заставляет контент выравниваться по левому краю и занимает минимально необходимое пространство, тем самым отменяя выравнивание;  межсловный интервал: 0;  также настроен на отмену предыдущего изменения и исправление интервала между словами.К сожалению, вложенные элементы    вызывают проблемы, потому что между ними нет пробелов; это исправляется включением пробела в разметку HTML в начале    и установкой  white-space: pre; , чтобы заставить пространство появиться.
 Я подготовил демонстрационную страницу, демонстрирующую эту технику. Он был построен путем вычисления разрывов строк в Firefox 76 с использованием букмарклета tex-linebreak и ручной вставки разметки, соответствующей разрывам строк; некоторые исправления были внесены вручную, поскольку библиотека не поддерживает должным образом длинное тире.Разрывы строк были рассчитаны для столбцов шириной от 250 до 500 пикселей с шагом 50 пикселей. Разрывы строк по Кнуту – Плассу приводят к значительному улучшению внешнего вида текста, особенно для более узких столбцов. В дополнение к улучшенным разрывам строк я также реализовал выступление дефисов, точек и запятых на правом поле, технику микротипографии, которая еще больше улучшает внешний вид. Чтобы (надеюсь) избежать проблем с программами чтения с экрана, в добавленной разметке устанавливается  aria-hidden = "true" ;  пользовательский выбор: нет;  также установлен, чтобы избежать проблем с копированием текста.
 Хотя этот метод отлично работает в Firefox и Chrome, он не работает в Safari, поскольку Safari не поддерживает  text-align-last  начиная с Safari 13.  2  Несмотря на то, что он не работает, соответствующая ошибка WebKit отмечена как «решено исправлено»; похоже, что поддержка была фактически добавлена ​​в 2014 году, но она стоит за флагом времени компиляции  CSS3_TEXT , который по умолчанию отключен. Таким образом, я разработал альтернативный метод, который использовал невидимые элементы шириной 100% для принудительного переноса строк без использования явных разрывов строк.Это снова сработало в Firefox и Chrome, хотя и вызывало незначительные проблемы с выделением текста, но снова имело серьезные проблемы в Safari. Похоже, что Safari неправильно обрабатывает выровненный по ширине текст с отрицательным интервалом между словами; Однако ослабление межсловного интервала вызывает дополнительные разрывы строк из-за различий в форматировании, что нарушает методику. На этом этапе я отказался от поддержки Safari и просто настроил его на использование разрыва строки по умолчанию в браузере, поместив CSS метода за запросом  @supports  для  text-align-last: justify .
 Чтобы сделать этот метод более полезным, необходимо автоматическое создание разметки, но демонстрационная страница служит подтверждением концепции. В идеале браузеры должны реализовать улучшенный алгоритм разрыва строки, который сделает этот метод устаревшим.
 Описание препроцессоров CSS 
 Препроцессоры
 CSS все чаще становятся основой рабочего процесса интерфейсных веб-разработчиков. CSS - невероятно сложный язык с множеством нюансов, и, стремясь упростить его использование, разработчики часто обращаются к использованию препроцессоров, таких как SASS или LESS.
 Препроцессоры CSS компилируют код, написанный с помощью специального компилятора. Затем они используют это для создания файла CSS, на который затем может ссылаться основной документ HTML.
 При использовании любого препроцессора CSS вы сможете программировать на обычном CSS так же, как если бы препроцессор не был на месте. Хорошо, что у вас также есть больше возможностей. Некоторые из них, такие как SASS, имеют особые стандарты стиля, которые призваны сделать написание документа еще проще, например, при желании можно опустить фигурные скобки.
 Конечно, препроцессоры CSS также предлагают другие функции. Многие из предлагаемых функций для препроцессоров невероятно похожи, с небольшими различиями в синтаксисе. Таким образом, вы можете выбрать практически все, что захотите, и сможете добиться того же. Вот некоторые из наиболее полезных функций:
 Переменные 
 Одним из наиболее часто используемых элементов в любом языке программирования является переменная, чего в CSS заметно не хватает. Имея в своем распоряжении переменные, вы можете определить значение один раз и повторно использовать его во всей программе.Пример этого в SASS:
  $ yourcolor: # 000056
.yourDiv {
  цвет: $ yourcolor;
 }  
 Объявляя переменную  SASS yourcolor  один раз, теперь можно повторно использовать тот же самый точный цвет во всем документе без необходимости повторного ввода определения.
 Циклы 
 Еще одним распространенным элементом в языках являются циклы, чего еще нет в CSS. Циклы можно использовать для многократного повторения одних и тех же инструкций без необходимости повторного ввода несколько раз.Пример с SASS:
  @ for $ vfoo от 35px до 85px {
  .margin - # {vfoo} {
    маржа: $ vfoo 10px;
   }
 }  
 Этот цикл избавляет нас от необходимости писать один и тот же код несколько раз для изменения размера поля.
 Операторы If / Else 
 Еще одна особенность, отсутствующая в CSS, - операторы If / Else.
No related posts.