Разрывы строк
Браузер по умолчанию разбивает строки текста таким образом, чтобы не было полосы горизонтальной прокрутки, наличие которой говорит о плохом стиле веб-дизайна. С этой целью браузер преобразует последовательность пробелов (если они присутствуют в тексте) в один пробел; разрывы строк также преобразуются в пробелы. Браузер "по своему усмотрению" разрывает строки так, чтобы они уместились в окно браузера по ширине.
Атрибут стиля white-space дает возможность веб-мастеру изменять правила, которыми руководствуется браузер при выводе текста на экран монитора.
Возможные значения white-space:
- normal - стандартное поведение браузера при выводе текста:
- разрывы строк - преобразуются в пробелы;
- последовательности пробелов - преобразуются в один пробел;
- разрыв текста на строки - выполняется.
- pre - текст выводится аналогично тегу <PRE>:
- разрывы строк - сохраняются;
- последовательности пробелов - сохраняются;
- разрыв текста на строки - не выполняется.
- nowrap:
- разрывы строк - преобразуются в пробелы;
- последовательности пробелов - преобразуются в один пробел;
- разрыв текста на строки - не выполняется.
- pre-wrap:
- разрывы строк - сохраняются;
- последовательности пробелов - сохраняются;
- разрыв текста на строки - выполняется.
- pre-line:
- разрывы строк - преобразуются в пробелы;
- последовательности пробелов - сохраняются;
- разрыв текста на строки - выполняется.
Тег <PRE> позволяет выводить текст так, как он выглядит в html-коде, что часто бывает очень удобно. Главный "недостаток" тега <PRE> заключается в том, что длинные строки не разрываются, поэтому возможно появление горизонтальной полосы прокрутки. Избежать этого можно довольно просто, если ввести стиль, который будет предопределять тег <PRE>:
ПРИМЕР:
PRE {white-space: pre-wrap}
|
Атрибут стиля word-wrap дает возможность указать место, в котором браузер может разрывать текст:
- normal - разрешает браузеру разрывать текст на строки только по пробелам (значение по умолчанию);
- break-word - разрешает браузеру разрывать текст на строки внутри слов - это будет полезно, если в тексте присутствуют очень длинные слова.
ПРИМЕР:
P {word-wrap: break-word}
|
Вертикальное выравнивание текста
Атрибут стиля вертикального выравнивания текста vertical-align применяется довольно редко (гораздо чаще он применяется в таблицах). Наиболее часто в тексте встречается верхний или нижний индекс (в математических, физических и химических формулах), который гораздо удобнее задавать тегами <SUB> и <SUP>.
Возможные значения vertical-align:
- baseline - выравнивание базовой линии текста по базовой линии текста родительского элемента (воображаемая линия на которой размещается текст), значение по умолчанию;
- sub - выравнивание базовой линии текста по базовой линии нижнего индекса родительского элемента;
- super - выравнивание базовой линии текста по базовой линии верхнего индекса родительского элемента;
- top - выравнивание верхнего края текста по верхнему краю родительского элемента;
- text-top - выравнивание верхнего края фрагмента текста по верхнему краю текста родительского элемента;
- middle - выравнивание центра текста по центру родительского элемента;
- bottom - выравнивание нижнего края текста по нижнему краю родительского элемента;
- text-bottom - выравнивание нижнего края текста по нижнему краю текста родительского элемента.
Надо понимать, что применение вертикального выравнивания текста имеет достаточно много значений, которые в различных случаях дают различный результат, поэтому применять vertical-align надо с осторожностью.
Параметры тени у текста
Параметры тени у текста задает атрибут стиля text-shadow.
text-shadow: <color> <horizontal offset> <vertical offset> [<blur radius>]
- color - задает цвет тени;
- horizontal offset - значение горизонтального смещения тени: положительное значение размещает тень правее текста; отрицательное - левее;
- vertical offset - значение вертикального смещения тени: положительное значение размещает тень ниже текста; отрицательное - выше;
- blur radius - значение величины размытия тени.
ПРИМЕР:
P {text-shadow: red 0px 0px 1pt}
|
В приведенном примере тень располагается прямо под текстом, и обозначает себя только благодаря размытию.
