Контакти
Головна › ›

Тег html перенесення на інший рядок. Перенесення рядка і розділова лінія в HTML. Робимо html код зручним

Переклад рядка, перенесення рядка, перенесення на новий рядок - це все про одне. У мові HTML перенесення на новий рядок застосовується часто. Є кілька шляхів: використовувати тег
для перекладу на новий рядок, а можна використовувати властивості CSS для розриву рядків. Розглянемо приклад використання тега розриву рядків:

В CSS перенесення рядка можна здійснити по-різному, наприклад ось так:

Br (
float: left;
width: 100%;
margin: 0 0 20px 0; / * Відступ після рядка 20 пікселів * /
}

Розділова лінія за допомогою HTML або CSS

В HTML створити розділову лінію дуже просто. Використовується теж непарний тег

- це і є розділова лінія. Розділова лінія починається з нового рядка і після неї є відступ. Ви можете управляти стилем горизонтальної лінії, а так само можна зробити альтернативу їй. Далі приклад розділової лінії за допомогою тега:

А тепер давайте стилізуємо (змінимо стилі, змінимо зовнішній вигляд) нашу розділову лінію:

hr (
width: 80%; / * Ширина лінії * /
height: 4px; / * Висота / товщина лінії * /
background: # 333; / * Фон / колір лінії * /
border: 0; / * Рамка навколо розділової лінії (приберемо її) * /
margin: 5px 0 5px 0; / * Відступ над і під лінією 5 пікселів * /
}

І створимо альтернативу нашої розділової лінії за допомогою тега

і CSS.

коротка інформація

версії CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

опис

Властивість white-space встановлює, як відображати пропуски між словами. У звичайних умовах будь-яку кількість прогалин в коді HTML показується на веб-сторінці як один. Винятком є \u200b\u200bтег 

Поміщений в цей контейнер текст виводиться з усіма пробілами, як він був відформатований користувачем. Таким чином, white-space імітує роботу тега 
Але на відміну від нього не змінює шрифт на моно.


синтаксис


white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit


значення
 normal Текст у вікні браузера виводиться як зазвичай, переноси рядків встановлюються автоматично. nowrap Прогалини не враховуються, переноси рядків у коді HTML ігноруються, весь текст відображається одним рядком; разом з тим, додавання тега 
 переносить текст на новий рядок. pre Текст показується з урахуванням всіх прогалин і переносів, як вони були додані розробником в коді HTML. Якщо рядок виходить занадто довгою і не поміщається у вікні браузера, то буде додана горизонтальна смуга прокрутки. pre-line У тексті пробіли не враховуються, текст автоматично переноситься на наступний рядок, якщо він не поміщається в задану область. pre-wrap В тексті зберігаються всі прогалини і переноси, однак якщо рядок по ширині не поміщається в задану область, то текст автоматично буде перенесений на наступний рядок. inherit Успадковує значення батька. 
Дія значень на текст представлено в табл. 1.


HTML5 CSS2.1 IE Cr Op Sa Fx

 

 
 
 white-space
 
 
 
 
приклад

 

 
 
 Велика теорема Ферма

 X n + Y n \u003d Z n
 де n - ціле число\u003e 2




 
 

 






Результат даного прикладу показаний на рис. 1.


Мал. 1. Застосування властивості white-space


об'єктна модель


document.getElementById ( "elementID") .style.whiteSpace


браузери


Браузер Internet Explorer до версії 7.0 включно не підтримує значення pre-line, pre-wrap і inherit. для