Как да променяте текстовото опаковане с HTML и CSS
За разлика от хартията, уеб страниците могат почти безкрайно се разширява настрани. Колкото и впечатляващо да е, това не е нещо, от което наистина се нуждаем, докато четем. Браузърите обгръщат текста в зависимост от ширина на контейнера за текст и ширина на екрана така че да можем да видим целия текст, без да се налага да превъртаме много странично (само надолу).
Опаковане нещо, което браузърите правят, имайки предвид много фактори, като езика на текста или поставянето на препинателни знаци и интервали - те не само натискайте какво не се вписва в определеното за текстовото съдържание поле.
Освен опаковане, браузъри също се грижи за пространствата; те обединяват множество последователни пространства в изходния код в едно пространство на визуализираната страница и регистрират принудителни прекъсвания на линии преди да започнат да работят върху опаковката.
Кога да промените подразбиращото се прехвърляне на текст
Това е страхотно и много оценявано. Но лесно можем да се окажем при обстоятелства, при които поведението на браузъра по подразбиране не е това, което търсим. Това може да бъде заглавие не трябва да се опаковат или дума в абзац по-добре да бъдеш счупен, отколкото да слизаш по линията, оставяйки странно празно пространство в края на линията.
Може също да се случи, че ние просто отчаяно трябва тези пространства, запазени в нашия текст, обаче браузърът продължава да ги комбинира в един, принуждавайки ни да добавим няколко в изходния код.
Предпочитанията за опаковане също могат промяна с езика и целта на текста. Мандаринската статия и една френска поема не е задължително да бъдат опаковани по същия начин.
Има доста голям брой CSS свойства (и HTML елементи!), Които могат контролирайте опаковката и точките на прекъсване и също дефинирате как пространствата и прекъсванията на редовете се обработват преди опаковането.
Възможности за мека обвивка и меки паузи
Браузърите решават къде да обгърнат препълнения текст в зависимост от границите на думите, тирета, срички, пунктуации, интервали и др. Всички тези места се наричат възможности за мека обвивка и когато браузърът разбие текста на едно такова място, прекъсването се нарича a мека обвивка.
Най-простият начин наложи допълнителна почивка може да се направи, като се използва доброто старо
Празно
Ако сте запознати с бяло пространство CSS собственост Обзалагам се, че за първи път сте го разбрали по същия начин, както много други; докато търсиш начин да го направиш предотврати опаковането на текст. Най- nowrap стойност на бяло пространство прави точно това.
както и да е бяло пространство имотът е нещо повече от просто опаковане. На първо място, какво е празно пространство? Това е набор от символи за интервал. Всяко пространство в комплекта варира един от друг по дължина, посока или и двете.
Типичен единичен хоризонтален символ е това, което добавяме чрез натискане на клавиша за интервал. Клавишът Tab също добавя a подобно пространство, но с по-голяма дължина. Клавишът за въвеждане добавя a вертикално пространство , за да започнете нов ред, и в HTML добавя a едно нечупливо пространство към уеб страници. Подобно на това, има много видове пространства, които представляват “празно”.
Както споменах в началото, браузърите сгъване на няколко интервала (хоризонтални и вертикални) в източника в едно пространство. Те също разгледайте тези символи за пространство за опаковане (места, където текстът може да бъде опакован), когато е необходимо опаковане.
И именно с тези действия на браузъра можем да контролираме бяло пространство. Имайте предвид, че бяло пространство собственост не засяга всички видове пространство, само най-често срещаните като например редовното хоризонтално единично пространство, пространство на табулатора и емисиите от редове.
По-долу можете да видите екранна снимка на примерен текст, който е опаковани от браузъра, за да се побере в неговия контейнер. Преливането се случва в дъното на контейнера, а препълненият текст е оцветен по различен начин. Ще забележите срутване на последователните пространства в кода.
âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте.
.textContainer width: 500px; височина: 320px;
След прилагане бяло пространство: nowrap; правило, опаковането на текста се променя по следния начин:
.textContainer / *… * / бяло пространство: nowrap;
Най- пред стойност на бяло пространство запазва всички пространства и предотвратява опаковането на текста:
.textContainer / *… * / бяло пространство: pre;
Най- предварително обвивка стойност на бяло пространство запазва всички пространства и обвива текста:
.textContainer / *… * / бяло пространство: предварително опаковане;
И накрая, предварително линия стойност на бяло пространство запазва вертикалните интервали като нови линии и обвива текста:
.textContainer / *… * / бяло пространство: предварително линия;
Счупи се дума
Друго важно CSS свойство, което трябва да знаете за контролиране на пренасянето на текст е Думата-пауза. Можете да видите във всички горепосочени снимки на екрана, че браузърът обвива текста преди думата “Здравейте” от дясната страна, отвъд която текст препълнен. Браузърът не наруши думата.
Въпреки това, ако вие трябва позволяват счупването на букви с една дума така че текстът да изглежда дори от дясната страна, трябва да използвате разбие всичко стойност за Думата-пауза Имот:
.textContainer / *… * / word-break: break-all;
Най- Думата-пауза имотът има и трета стойност разбие всичко и нормален (принадлежащи към подразбиращото се счупване на линия). Най- Задръж всичко стойност не позволява разчупване на думи.
Може да не успеете да видите ефекта от Задръж всичко на английски. Но на езици, където са буквите в една дума самостоятелни единици, браузърът може да счупи думите при опаковане и това може да се предотврати Задръж всичко.
Например, букви с корейски думи, първоначално счупени за опаковане, се съхраняват заедно когато бяло пространство: запази всички; правилото.
ìА ?? ¸ê³А ?? à «Â¥Â¼ А-А-А¥А-А ?? а ?? à «Â ??  ?? Ã- °  ??, ìВ?¬Â½А ?? à «а ?? а ?? ë ¡А ?? А-А ?? а ?? ìА ?? А-А¬А ?? а ?? ìА ?? ¤. ì10 Â- ?? ìВ?¬Â½А ?? à «а ?? а ?? êµА-А¬Â  ?? А-А ?? а ?? ìА ?? а ?? ê °  ?? 1997 «« Â…  ?? 3а¬А ?? а ?? 10А¬А ?? ¼à «Â¶В? 12 °¬А ?? ¼ê¹А ?? ì§А ?? à «Â… Â… ìА ?? ¼ìА ?? а ?? à «Â§А ?? ìА ?? ¸ì¦А ?? ìА-А ?? ìА ?? а ?? ìА-А´Ã «Â¦Â½Ã «а ?? а ?? ë а ?? ¤. ì§А ?? ê¸А ?? à «а ??  ± ë ¡А ?? А-А ?? а ?? ìА ?? А-А¬А ?? а ?? ìА ?? ¤. ìА ?? ´ А-А ?? а ?? ìА ?? а ?? ìА-А ?? ìА ?? а ?? à «а ?? а ?? ìÂ-Â… ê³А ?? ìA? à «Â °  ?? ìА ?? а ?? ì  «Ã« ¬¸ê °  à ?? «а ?? ¤ìА ?? ´ А-А ?? ¨ê », а ?? à «ÂªÂ¨Ã¬А-А¬ à «а ?? ¤ìА ?? а ?? ê³¼ ê °  à ??¬А ?? а ?? à «Â¶А ?? ìА ?? ¼à «Â¥Â¼ à «а ?? ¤à «Â £ ¹à «а ?? а ?? ë а ?? ¤.
.textContainer / *… * / word-break: запази всички;
Това свойство може да поддържа друга извикана стойност разпадането дума в бъдеще. Ще видите как разпадането дума работи по - късно, в. \ t “Преливане” на този член.
Word break възможности
Разработчиците също могат добави възможности за обвиване в думите, използвайки
âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Нello âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте. âА ?? а ?? Здравейте.
.textContainer / *… * / бяло пространство: предварително опаковане;
Без
тирета
Най- тирета CSS собствеността е друг начин за контролиране на прекъсванията между буквите с една дума. Имаме отделна статия за дефиниране на CSS, ако проявявате интерес. Накратко, имотът ви позволява създаване на възможности за опаковане чрез сричкопренасяне.
негов Автоматичен стойността подканва браузъра да автоматично дефиниране и счупване на думи, когато е необходимо при опаковане. Най- наръчник стойността принуждава браузърите да увийте (ако е необходимо) при добавените от нас възможности за сричкопренасяне, като знака с тире (‐) или (меко тире). ако нито един е дадено като стойност, която ще има няма опаковка в близост до тире.
bluehouse bluehouse bluehouse синя къща bluehouse bluehouse bluehouse синя къща bluehouse bluehouse bluehouse bluehouse
.textContainer / *… * / -webkit-тирета: авто; -ms-тирета: авто; тирета: авто;
Преливане
Най- преливане обвивка CSS контролира свойството, ако a браузърът може да счупи думи (или запазени пространства, поддръжката за които може да се случи в близко бъдеще) при преливане. Когато разпадането дума стойността се дава за преливане обвивка, думата ще бъдат разбити в случай не са намерени други възможности за мека обвивка в линията.
Отбележи, че преливане обвивка е известен също като Думата обвивка (те са псевдоними).
bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse
.textContainer / *… * / overflow-wrap: break-word;
При липса на интервал между буквите в горния HTML код (т.е. без възможности за опаковане), текстът не е бил предварително опакован и е запазена като една дума.
Обаче, когато е дадено разрешение за увиване на текста чрез прекъсване на думи (т.е. разпадането дума беше дадена стойност преливане обвивка), опаковането се е случило чрез разбиване на целия низ където и да е било необходимо.
