Koje vrijednosti može poprimiti svojstvo poravnanja teksta? CSS svojstva za stiliziranje HTML teksta (okomito poravnanje, poravnanje teksta, uvlačenje teksta i drugo). HTML oznake koje određuju poravnanje i uvlačenje teksta

и

В том, что последний делает переход на новую строку (вертикальный отступ), а div не делает.

HTML теги, определяющие выравнивание текста, отступ

Выровненный по ширине текст используется в типографии

В примере ниже показано, как выровнить текст по ширине страницы:

align="left"	align="right"
	С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.
align="justify"	align="center"
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.	С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку.

Значение justify обеспечивает равномерное выравнивание текста справа и слева , то есть по ширине . Такой метод широко используется в печати.

Выравнивание текста в HTML по центру и по ширине

Выравнивание текста в HTML по центру, текст справа :

Результат:

Атрибуты и значения

• align="left" - определяет выравнивание текста слева (по умолчанию).
• align="center" - выравнивает текст по центру .
• align="right" - выравнивает текст справа .

Выравнивание | HTML отступ текста

HTML текст и его отступ слева страницы

Произведем отступ текста слева двумя способами:

Результат:

Посмотреть в новом окне.

CSS	Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
2.1	6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+
3			2.0+	11.6+	3.1+	3.6+	2.1+	2.0+

Краткая информация

Версии CSS

Значения

center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. auto Не изменяет положение элемента. inherit Наследует значение родителя. start Аналогично значению left , если текст идёт слева направо и right , когда текст идёт справа налево. end Аналогично значению right , если текст идёт слева направо и left , когда текст идёт справа налево.

HTML5 CSS2.1 IE Cr Op Sa Fx

Rezultat ovog primjera prikazan je na sl. 1.

Riža. 1. Poravnajte tekst u pregledniku Safari

Internet Explorer do i uključujući verziju 7.0 tumači ovaj primjer nešto drugačije od ostalih preglednika, poravnavajući ne samo tekst, već i blokove (Sl. 2).

Riža. 2. Poravnajte tekst Internet preglednik Istraživač 7

Objektni model

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

Preglednici

IE do i uključujući 7.0 usklađuje ne samo sadržaj elementa na razini bloka, već i sam element.

Svojstvo text-align-last ( ne treba brkati s HTML align) određuje kako će zadnji redak bloka ili redak prije prisilnog prekida biti poravnat. Ovo je važno jer u zadnji redak odlomak obično ne sadrži dovoljno teksta da ispuni sav prostor.

U ovom ćemo članku pokriti sve aspekte svojstva text-align-last, uključujući vrijednosti koje prihvaća i podršku preglednika.

Upotreba i prihvaćene vrijednosti

Upotreba svojstva text-align-last je jednostavna. Evo isječka koda za poravnanje posljednjeg retka teksta udesno:

Intro-graph ( text-align: justify; // Potreban za IE i Edge text-align-last: right; )

Svojstvo može imati sedam vrijednosti. Vjerojatno ste upoznati sa standardnim HTML tekstualnim vrijednostima align:left, right i center. Oni poravnavaju tekst u zadnjem retku desno, lijevo i središte spremnika.

Primjer u nastavku ilustrira razlike između ove tri vrijednosti:

Pogledajte primjer

Četvrta vrijednost, justify, poravnava posljednji redak tako da je tekst ravnomjerno raspoređen po cijeloj širini spremnika. To se postiže dodavanjem odgovarajućeg broja razmaka između riječi. Ovisno o količini teksta, ovo se svojstvo može koristiti za potpuno popunjavanje prostora u zadnjem retku bez prevelikih razmaka između riječi.

Tekst u drugom odlomku također je raširen po širini, ali budući da zadnji redak sadrži samo jednu riječ, on je pozicioniran ulijevo.

Pogledajte primjer

Poravnanje posljednjeg retka teksta ulijevo prikladno je za jezike koji se čitaju s lijeva na desno ( LTR), ali to će biti netočno za RTL jezike. U takvim slučajevima korištenje lijevih ili desnih vrijednosti može uzrokovati probleme.

Srećom, možete upotrijebiti početnu vrijednost za poravnavanje teksta s rubom gdje počinju pisanje i čitanje. To znači da ćete postavljanjem svojstva text-align-last na start poravnati tekst lijevo za LTR jezike i desno za RTL jezike.

Također možete upotrijebiti završnu vrijednost za poravnavanje teksta na suprotnom rubu od mjesta na kojem počinjete pisati i čitati. To će odgovarati vrijednosti desno za LTR jezike i lijevo za RTL jezike.

Pogledajte primjer

Zadana vrijednost za ovo svojstvo je auto. Kada se koristi, tekst u zadnjem redu je poravnat prema vrijednosti HTML svojstva poravnanje teksta osim ako nije postavljeno na obostrano poravnanje. U suprotnom, tekst se raspoređuje po širini spremnika samo ako je svojstvo text-justify postavljeno na distribute . U suprotnom, tekst je poravnat do ruba gdje počinje pisanje i čitanje.

Važne bilješke

Da bi text-align-last funkcionirao, svojstvo text-align mora biti postavljeno na justify. Ali ovo je pravilo implementirano samo u IE i Edge. U Firefoxu i Chromeu, svojstvo radi bez postavljanja text-align na justify . U donjem primjeru, tekst bi trebao biti poravnat udesno u Edge i IE. U drugim će preglednicima posljednji redovi odlomaka biti poravnati prema vrijednosti svojstva text-align-last, a preostali redovi bit će desno poravnati.

Pogledaj demo

Ako ne postavimo text-align na align justify HTML, rezultat ne izgleda tako lijepo. Stoga ćete distribuciju teksta najvjerojatnije postaviti na širinu.

Svojstvo funkcionira čak i ako odlomak ima prisilni prijelom retka naveden pomoću oznake
ili tako nešto. Imajte na umu da će ovo svojstvo utjecati na sve posljednje retke teksta unutar navedenog elementa, a ne samo na krajnji. Na primjer, ako tekst unutar elementa article ili div sadrži tri odlomka, zadnji redak u svakom bit će poravnat prema svojstvu text-align-last postavljenom za cijeli roditeljski element.

Ako trebate samo poravnati zadnji redak sadržaja, možete koristiti birače :last-child ili :last-of-type. Kao primjer uzmite kôd iz demonstracije u nastavku:

članak (text-align: justify;) article p:last-of-type (text-align-last: right; )

Poravnava posljednji redak posljednjeg odlomka našeg članka s desne strane. Preostali redovi su poravnati na temelju vrijednosti svojstva HTML poravnanja teksta.

Pogledaj demo

Također možete koristiti druge birače: :even i :odd za promjenu poravnanja.

Ponekad se odlomak može sastojati samo od jednog retka. U ovom slučaju, ako ste naveli vrijednosti i za svojstvo text-align i za svojstvo text-align-last, tada će drugo svojstvo imati prednost.

Razmotrite sljedeći isječak koda:

p (text-align: poravnati; ) p:nth-of-type(2) (text-align-last: lijevo; )

Ako drugi odlomak ima samo jedan redak, tada će tekst biti lijevo poravnat jer će text-align-last imati prednost. Demo u nastavku prikazuje ovaj CSS kod na djelu, kao i nekoliko drugih. HTML primjeri uskladiti.

Pogledaj demo

Podrška za preglednik

Podrška za ovo svojstvo može se omogućiti pomoću opcije " Omogućite značajke eksperimentalne web platforme" V Google Chrome i Opera, počevši s verzijama 35 i 22. Potpuno je podržan u Chromeu 47+ i Operi 34+.

Da biste koristili ovo svojstvo u Firefoxu, morat ćete mu dodati prefiks -moz- . IE ne podržava početnu i završnu vrijednost. U isto vrijeme, Edge u potpunosti podržava ovo svojstvo. Jedini popularni preglednik koji ne podržava u potpunosti text-align-last je Safari.

Postavlja poravnanje posljednjeg retka bloka teksta.

kratka informacija

Oznake

	Opis	Primjer
<тип>	Označava vrstu vrijednosti.	<размер>
A & & B	Vrijednosti se moraju ispisati navedenim redoslijedom.	<размер> && <цвет>
A | B	Označava da trebate odabrati samo jednu vrijednost od predloženih (A ili B).	normalno | malim slovima
A || B	Svaka se vrijednost može koristiti samostalno ili zajedno s drugima bilo kojim redoslijedom.	širina || računati
	Vrijednosti grupa.	[ obrezivanje || križ ]
*	Ponovite nula ili više puta.	[,<время>]*
+	Ponovite jednom ili više puta.	<число>+
?	Navedena vrsta, riječ ili grupa nisu obavezni.	umetak?
(A, B)	Ponovite najmanje A, ali ne više od B puta.	<радиус>{1,4}
#	Ponovite jednom ili više puta odvojene zarezima.	<время>#

×

Vrijednosti

auto Odgovara poravnanju određenom svojstvom text-align, osim vrijednosti poravnanja. Za njega će poravnanje biti kao početak. start Linija je poravnata s početnim rubom bloka, koji se može mijenjati ovisno o smjeru teksta (slijeva na desno ili zdesna nalijevo). kraj Linija je poravnata sa završnim rubom bloka, koji je određen smjerom teksta. lijevo Linija je poravnata ulijevo. desno Linija je poravnata udesno. centar Linija je centrirana. justify Linija je poravnata. Ako postoji samo jedna riječ u zadnjem retku, ona će biti poravnata lijevo.

Utjecaj različita značenja Položaj teksta prikazan je u tablici. 1.

Stol 1. Utjecaj vrijednosti zadnjeg poravnanja teksta

Značenje	Poravnanje	Vrsta teksta
lijevo	Lijevo
pravo	Pravo
centar	Centrirano
opravdati	Širina

Pješčanik

Winnie Pooh uvijek nije bio nesklon malom osvježenju, pogotovo u jedanaest ujutro, jer je u to vrijeme doručak već odavno završio, a ručak još nije počeo. I, naravno, silno se obradovao kad je vidio da Zec vadi šalice i tanjure.

div (text-align-last: početak ;)

Primjer

Objektni model

Objekt.style.textAlignLast

Bilješka

Internet Explorer i Edge ne podržavaju početne i završne vrijednosti.

Firefox prije verzije 49 podržava svojstvo -moz-text-align-last.

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobravanja.

• Preporuka - Specifikaciju je odobrio W3C i preporučuje se kao standard.
• Preporuka kandidata ( Moguća preporuka) - grupa odgovorna za standard je zadovoljna da on ispunjava svoje ciljeve, ali joj je potrebna pomoć razvojne zajednice za implementaciju standarda.
• Predložena preporuka Predložena preporuka) - u ovoj fazi dokument se podnosi Savjetodavnom vijeću W3C na konačno odobrenje.
• Radni nacrt - zrelija verzija nacrta koji je raspravljen i dopunjen za reviziju zajednice.
• Urednikov nacrt ( Urednički nacrt) - nacrt verzije standarda nakon izmjena koje su izvršili urednici projekta.
• Nacrt ( Nacrt specifikacije) - prva verzija nacrta standarda.

×