Пробелы и перенос строки.

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

Свойство white-space имитирует работу тега <pre>, определяя показывать или нет пробелы между символов, если таковых больше чем один, а так же разрешает или запрещает перенос строки.

Может иметь следующие значения:

  • normal - текст выводится как обычно (лишние пробелы убираются), переносы строк определяются автоматически. (по умолчанию)
  • nowrap - запрещает автоматический перенос строки.
  • pre - показывает текст в том виде в котором он был набран. пробелы и переносы строки не удаляются.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Пробелы и перенос строки</title>
</head>
<body>
<p style="white-space: pre">
Слон.

Дали туфельки слону.
Взял он туфельку одну
И сказал: - Нужны пошире,
И не две, а все четыре!

С. Я. Маршак.
</p>
<hr>
<p style="white-space: nowrap">
Это длинный предлинный текст, который вряд ли полностью поместится в одной строчке, по умолчанию в нужном месте, браузер перенес бы его на следующую строку, однако мы принудительно запретили это делать, с помощью значения nowrap свойства white-space. Так что теперь, по всей вероятности, в окне браузера появиться горизонтальная полоса прокрутки.. и зачем, спрашивается, мы это сделали?
</p>
</body>
</html>

Смотреть пример

При использовании nowrap текст в нужном месте можно переносить на следующую строку используя тег <br>

Расстояние между словами.

Свойство word-spacing задаёт расстояние между словами (группами символов не разделенными пробелом) в строке.

Значения:

  • normal - Нормальное расстояние. (по умолчанию)
  • px - Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Расстояние между словами</title>
</head>
<body>
<p align="left" style="word-spacing: 10px">Расстояние между словами равно десяти пикселям</p>
<p align="left" style="word-spacing: -10px">Расстояние между словами может иметь отрицательное значение</p>
</body>
</html>

Смотреть пример








Дата добавления: 2015-11-04; просмотров: 625;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.005 сек.