CSS3 text May kasamang mga katangian ng teksto upang makatulong na malutas ang mga problema sa pambalot ng teksto at pag-trim ng teksto sa loob ng nilalaman.

Mga katangian ng CSS3 para sa pag-format ng teksto

1. Pag-trim sa linya ng text-overflow

Binibigyang-daan ka ng property na limitahan ang haba ng text kapag hindi ito kasya sa lalagyan, biswal na putulin ito o ipakita ito gamit ang mga ellipse. Gumagana lang ang property kung tinukoy ang mga sumusunod na kundisyon: dapat tukuyin ang lapad ng lalagyan, dapat may mga value na overflow ang elemento: hidden at white-space: nowrap . Hindi namamana.

Syntax

P (lapad: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ) Fig. 1. I-crop ang text gamit ang text-overflow property

2. Hyphenation sa loob ng mga salita word-break

SA normal na sitwasyon ang mga salita ay inililipat sa ibang linya kung saan may mga puwang o gitling (“ malambot na paglipat"), o sa kaso ng sapilitang paglipat gamit ang elemento
. Binibigyang-daan ka ng property na ito na magtakda ng mga panuntunan sa hyphenation sa loob ng mga salita upang mahabang linya ganap na napuno ang espasyo sa loob ng lalagyan. Hindi ginagamit para sa mga wikang CJK (Chinese-Japanese-Korean). Nagmana.

Syntax

P (word-break: normal;) p (word-break: break-all;) p (word-break: keep-all;)

3. I-wrap ang mga salita sa word-wrap line

Ginagamit ito sa mga kaso kung saan ang teksto ay hindi magkasya sa lalagyan nito at lumampas sa hangganan nito. Lets rip mahabang salita at ilipat ang mga ito sa susunod na linya. Nagmana. Magpapagana lang kung pinapayagan ng value ng white-space ang mga line break.

Kumusta sa lahat at magsimula na tayo. Sabihin nating mayroon tayong sumusunod na teksto:

Ang gobyerno ng United Arab Emirates at ang administrasyon ay nakatuon sa lungsod na ito ng lahat ng mga pinakabagong teknolohiya batay sa pinakabagong mga nagawa ng agham at teknolohiya, sinusubukang gawing isang lungsod ng hinaharap, na parang diretso mula sa screen ng ilang science fiction pelikula. Kasama sa mga teknolohiyang ito ang mga robot na pulis, robot na sasakyan at sistema ng transportasyon Hyperloop, at sa malapit na hinaharap, magsisimulang gumana ang isang automated flying taxi service sa Dubai. At bilang paghahanda para sa kaganapang ito, ang isang electric two-seater Volocopter aircraft na may 18 rotors, na gagamitin bilang taxi, ay gumawa ng unang paglipad nito sa automatic mode, isinulat nila...

Narito mayroon kaming ilang teksto kung saan magsisimula na kaming magtrabaho.

At ang unang pag-aari na ating isasaalang-alang ay tinatawag na word-break

word-break: normal | panatilihin-lahat | break-all

Pangunahing interesado kami sa dalawang kahulugan ng ari-arian na ito normal - ang default na halaga at break-all kung saan namin itinatag na ang word wrapping ay isinasagawa ng character ayon sa character. Kung tungkol sa keep-all, kung gayon binigay na halaga Ginagamit para mag-hyphenate ng mga salita sa Chinese, Japanese at Korean.

P( word-break: break-all;. )

Pakitandaan na pagkatapos ilapat ang istilong ito, ang lahat ng aming teksto ay nakaunat sa buong magagamit na lapad at ang mga gitling ay isinasagawa hindi sa pamamagitan ng mga salita, ngunit sa pamamagitan ng mga character. Maaaring maging kapaki-pakinabang ang property na ito kapag mayroon kaming napakahabang salita na hindi akma sa tinukoy na lapad. Gayunpaman, lumilikha ito ng isang uri ng abala, dahil ganap na ang lahat ng mga salita ay inililipat ng character ayon sa karakter, kahit na ang mga angkop sa ibinigay na lapad.

Sa kabutihang palad, mayroong isang katulad na pag-aari na naglilipat lamang ng mga salita na hindi akma sa mga character. Ito ay tinatawag na overflow-wrap:

P( overflow-wrap: break-word; )

at pagkatapos ilapat ang halaga ng break-word, ang lahat ng aming teksto ay inililipat ng salita sa bawat salita, at ang mga salitang hindi akma sa tinukoy na lapad ay inililipat ng karakter sa pamamagitan ng karakter. Masasabi nating tapos na ang gawain! Bilang karagdagan sa halaga ng break-word, tinatanggap ng property na ito ang:

overflow-wrap: normal | break-word | magmana;

Ngayon ay lumipat tayo sa isang mas advanced na css property para sa word wrapping sa text.

Isaalang-alang natin ang white-space property, kung saan maaari nating gayahin ang pagpapatakbo ng pre tag nang hindi binabago ang mismong text sa monospace.

white-space: normal | nowrap | pre | paunang linya | pre-wrap | magmana

Sa pangkalahatan, gamit ang property na ito, gumagana lang kami sa mga puwang sa text. Halimbawa, kung ilalapat namin ang sumusunod na istilo sa aming teksto:

White-space: nowrap;

lahat ng line break ay hindi papansinin at ang aming text ay ipapakita bilang isang linya.

White-space: pre;

Kung ang value ay pre, lahat ng line break ay magiging katulad ng nasa source code. Bukod dito, kung ang teksto ay hindi magkasya sa tinukoy na lapad, hindi ito ililipat. Kung gusto natin itong ilipat, kailangan nating tukuyin ang halaga ng pre-line.

Kung nais nating isaalang-alang hindi lamang ang mga break ng linya source code, ngunit pati na rin ang mga puwang sa pagitan ng mga salita, pagkatapos ay kailangan mong tukuyin:

White-space: pre-wrap;

Iyon lang talaga ang gusto kong sabihin sa iyo tungkol sa hyphenation ng salita gamit ang css. Umaasa ako na ang artikulong ito ay naging kapaki-pakinabang sa iyo at gagamitin mo ang kaalaman na nakuha nang higit sa isang beses.

Well, nagpapaalam ako sa iyo. Nais kong tagumpay ka at good luck! Bye!

Abril 10, 2016

Hi sa lahat). Patuloy akong nagsusulat tungkol sa iba't-ibang mga kapaki-pakinabang na katangian wika ng css, na sa isang paraan o iba ay makakatulong sa layout. At ngayon gusto kong sabihin sa iyo kung paano i-wrap ang mga salita sa CSS kung hindi sila magkasya sa kanilang lalagyan. Ipapakita ko sa iyo ang lahat ng may totoong halimbawa.

Paganahin ang hyphenation para sa mga salitang hindi akma

Sabihin nating mayroon akong isang bloke na 100 pixels ang lapad at kailangan kong magsulat ng ilang teksto dito. May isang salita sa text "self-extracting". Ganito nangyayari ang isang archive, halimbawa) Ngunit hindi iyon ang punto. Napakahaba ng salita, sadyang hindi ito magkasya sa lapad ng lalagyan. Isulat natin ito sa isang makitid na bloke (100 pixels). Ano ang mangyayari?

Sa nakikita mo, gumapang ang kawawang salita sa lalagyan, aba, wala na itong mapupuntahan, ano ang magagawa mo. At ito ay walang indentation. Kaya, dito nagliligtas ang word-wrap property. Narito ang kailangan mong itakda sa block upang paganahin ang word wrapping dito:

Word-wrap: break-word;

At para maging mas kapani-paniwala, maaari ka ring magdagdag ng panloob na padding. Kaya, pagkatapos ilapat ang ari-arian, nakita namin na ang mga salita na masyadong mahaba ay ililipat ng sulat sa isa pang linya. Bukod dito, kahit na ang pangalawang linya ay hindi sapat para sa salita, ang natitirang bahagi nito ay ililipat sa pangatlo, atbp.

Nais kong tandaan na ang ari-arian ay maaaring gamitin nang walang takot. Una, mahusay itong gumagana sa mga browser ngayon. Pangalawa, ito ay gumagana nang matalino. Ibig sabihin, para sa lahat ng normal na salita ay walang hyphenation ang buong salita ay lagyan ng gitling susunod na linya, kaya hindi maaapektuhan ang pagiging madaling mabasa. Makikita mo ito sa screenshot na ito.

Kailan gagamitin ang word-wrap

Actually, so far may nakikita akong 2 use case. Ang una ay para lamang sa makitid na mga bloke, kung saan natatakot ka na ang mahahabang salita ay maaaring hindi magandang tingnan sa labas ng mga hangganan ng bloke. Ang pangalawa ay kapag nilayon ng taga-disenyo na ang pamagat ng site ay nasa ilang linya.

Kaya, sa artikulong ito natutunan namin kung paano gawin ang word wrapping sa css. Iyon lang para sa akin ngayon. See you.

Kadalasan ay kailangang magdagdag bagong talata, ngunit wala walang laman na linya, na ipinapasok ng tag ng talata

Para sa ilang mga fragment ng teksto, hindi naaangkop ang karaniwang spacing ng talata. Ang mga ito ay maaaring mga inskripsiyon sa ilalim ng mga larawan at sa mga talahanayan, tula, panipi, talababa at tala.

Upang pilitin ang mga line break, isang espesyal na tag ang ibinigay, ang function na kung saan ay nakapaloob sa pangalan nito br (break row - "break a row, line"). Tag
wika ng hypertext html markup nangangahulugan na ang lahat ng nilalamang sumusunod dito ay dapat magsimula sa isang bagong linya. Kung kinakailangan, maaari kang magdagdag ng ilang mga tag sa isang hilera upang makamit ang kinakailangang espasyo.

Tag
ay hindi case sensitive at hindi nangangailangan ng pansarang tag dahil ito walang laman na elemento, ngunit mas mabuting masanay sa pagsasara ng lahat ng mga tag. Sa XHTML, ang break na tag ay dapat na "sarado" na may backslash.

Halimbawa ng paggamit ng break tag