При излагането, уеб администраторите периодично имат въпрос: как ще бъде увит текстът? В повечето случаи браузърът се справя сам с тази задача. Но понякога този процес трябва да бъде взет под контрол, особено при оформяне на дълги думи и фрази, които, ако бъдат прехвърлени неправилно, губят своето значение.
свойство за обвиване на думи
В HTML има специален етикет за разделяне на редове.
. Но твърде честото му използване се счита за лоша форма сред разработчиците и често показва непрофесионализъм. Като доказателство си представете, че имате лого и искате всяка буква да започва на нов ред:
Резултатът е тромав и грозен код, от който всеки разработчик ще изпита културен шок. И какво, ако искате логото да се показва хоризонтално на настолната версия, но вертикално, ако ширината на екрана е по-малка от 550px? Затова винаги използвайте каскадни таблици със стилове, за да персонализирате външния вид на елементите. Освен това, с помощта на CSS инструментите, прекъсванията на редове се извършват по по-елегантен начин. В същото време няма излишно маркиране, което само намалява скоростта на зареждане на страници.
Първото свойство, което трябва да разгледате за обработка на текст, е word-wrap. Приема три стойности: нормално, прекъсване на всички и запазване на всички. Трябва само да запомните break-all, за да работите. Нормално е по подразбиране и няма смисъл да го посочвате. Keep-all означава предотвратяване на прекъсвания на редове в CSS документ. Създаден специално за китайски, японски и корейски знаци. Така че, ако няма да водите блог на нито един от тези езици, няма да имате нужда от функцията. Също така не се поддържа от браузъра Safari и мобилните телефони с iOS.
За да зададете нов ред за всяка буква към логото от предишния пример с помощта на CSS, трябва да напишете следния код:
P( шрифт: удебелен 30px Helvetica, sans-serif; ширина: 25px; word-wrap: break-all; )
Ширината и размерът на шрифта са избрани по такъв начин, че да има достатъчно място само за една буква. Word-wrap със стойност break-all казва на браузъра всеки път да пренася думата на нов ред. Това свойство не може да се нарече незаменимо. Но това ще бъде полезно при проектирането на малки блокове с текст, като полета за коментари.
свойство бяло пространство
Често срещана грешка на начинаещите уеб разработчици е да се опитват да редактират текст с интервали или да натискат клавиша Enter и след това да се чудят защо усилията им не се показват на страницата. Без значение колко пъти натиснете "Enter", браузърът ще го игнорира. Но има начин да го накарате да показва текста по начина, по който искате, и да вземете предвид цялото разстояние.
В CSS документ прекъсванията на редове, присвоени със свойството бяло пространство, могат да бъдат конфигурирани да зачитат интервалите или да се натиска клавиша Enter. Бялото пространство със стойност на предварителен ред ще накара браузъра да види Enter в текста.
Ако промените pre-line на pre-wrap във вашия CSS код, обвиването на реда ще включва интервали. Обратно, деактивирайте всяко обвиване, като зададете свойството бяло пространство на текста със стойността nowrap:
#wrapper p( цвят: #FFF; padding: 10px; шрифт: удебелен 16px Helvetica, sans-serif; бяло пространство: nowrap; )
препълване на текст
Друг полезен инструмент за работа с текст е text-overflow. В допълнение към обвиването на редове, свойството CSS позволява изрязване на съдържанието, когато контейнерът е пълен. Приема две стойности:
- клип - просто изрязва текста;
- многоточие - добавя многоточие.
За да работи свойството, елементът трябва също да бъде настроен да предотвратява прекъсвания на редове и препълване със стойност hidden.
кратка информация
CSS версии
| css 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Свойството бяло пространство задава как да се показват интервалите между думите. При нормални обстоятелства произволен брой интервали в HTML кода ще се показват като едно на уеб страница. Изключението е етикетът
Текстът, поставен в този контейнер, се показва с всички интервали, както е форматиран от потребителя. Така бялото пространство имитира как работи маркерътНо за разлика от него, той не променя шрифта на моноширин.Синтаксис
празно пространство: нормално | nowrap | предварително | предварителна линия | предварително обвиване | наследи
Стойности
нормално Текстът в прозореца на браузъра се показва както обикновено, прекъсванията на редове се задават автоматично. nowrap интервалите се игнорират, прекъсванията на редове в HTML кода се игнорират, целият текст се показва на един ред; обаче добавяне на етикета
обвива текст на нов ред. pre Текстът се показва, включително всички интервали и тирета, както са добавени от разработчика в HTML кода. Ако редът е твърде дълъг, за да се побере в прозореца на браузъра, ще бъде добавена хоризонтална лента за превъртане. интервалите преди ред не се вземат предвид в текста, текстът автоматично се пренася в следващия ред, ако не се побира в посочената област. предварително обвиване Всички интервали и тирета се запазват в текста, но ако ширината на реда не се вписва в посочената област, текстът автоматично ще се премести в следващия ред. inherit Наследява стойността на родителя.Ефектът на стойностите върху текста е представен в табл. един.
HTML5 CSS2.1 IE Cr Op Sa Fx
бяло пространство Пример
Последната теорема на Ферма
х н+Y н=Z н
където n е цяло число > 2Резултатът от този пример е показан на фиг. един.
Ориз. 1. Прилагане на свойството бяло пространство
Обектен модел
document.getElementById("elementID ").style.whiteSpace
Браузъри
Internet Explorer до и включително версия 7.0 не поддържа стойности pre-line, pre-wrap и inherit. За