SkylineLab > Статьи > В помощь верстальщику > CSS-свойства white-spaceСтатьи
CSS-свойства white-space

В помощь верстальщику: Статьи - CSS-свойства white-space

     CSS-свойства white-space

     Немногим, начинающим CSS-кодерам знакомо чрезвычайно полезное свойство, именуемое white-space. Вам вполне возможно обходиться без него на протяжении долгого времени, но когда узнаете о нем, то признаете, что оно весьма удобно, и введете его в свой арсенал, как постоянный инструмент. Далее рассматриваются варианты значений свойства white-space.

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

     Но, если же вы желаете отобразить все переносы строк и пробелы – воспользуйтесь тэгом

. Весь текст внутри этих тэгов (конечно, не заключенный еще и в другие тэги), выведется в точно таком же виде, как его отформатировали в коде. Причем, даже если в разметке совершенно отсутствуют разрывы строки, все равно тэг 
добавит одну строчку, чтобы создать дополнительный отступ. Из этого следует, что можно применять вышеназванный тэг, чтобы переопределять дефолтное подведение HTML. 

 

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

     Значение: normal

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

      Значение: nowrap

     Это значение является самым распространенным свойством white-space, так как оно совершенно идентично значению normal, кроме, впрочем, единственного существенного отличия. Значением nowrap полностью игнорируются переносы строк, вне зависимости от того, появились ли они в ходе обработки текста, за счет ограниченного контейнера или были поставлены в коде.

     Элемент, с назначенным свойством white-space: nowrap, вместо переноса текста или других строчных элементов на новую строку, будет расширять границы родительского блока, до тех пор, пока содержимое не вместится там одной строкой. Так же, дополнительно, все множественные пробелы сократятся до одного, как и в значении normal.

      Значение: pre

     Значение pre, целиком оправдает ваши ожидания – вы получите именно то форматирование, которое отображено в коде. Будут учтены все переносы и пробелы строк, как в случае, когда текст берется в тэги

. Помимо этого, если вы в коде, поместили текст без переносов, то расширятся границы родительского контейнера, чтобы разместить текст одной строкой. 

 

      Значение: pre-line

     Данное значение действует подобно стандартному значению normal, кроме определенной тонкости: в ходе обработки будут учтены переносы строк. Множественные пробелы как обычно игнорируются, но если в вашей разметке присутствуют переносы строк, то при выводе в браузере они все появятся.

      Значение: pre-wrap

     Данное значение почти полностью аналогично pre, кроме того, что текст выводится в пределах своего родительского элемента. Значит, текст не вытянется одной строкой, имитируя форматирование в коде, но будут учтены множественные переносы строк и пробелы.

     Чаще всего свойство white-space, используют, чтобы устранить нежелательные переносы строки.


<< Назад

+7 (903) 66-22-797