Teksta pārveidošana - CSS-triki

Anonim

text-transformĪpašums CSS kontrolē teksta lietu un kapitalizāciju.

.lowercase ( text-transform: lowercase; )

Teksta pārveidošanas vērtības

  • lowercase visus atlasītā teksta burtus padara mazus.
  • uppercase visus atlasītā teksta burtus padara lielus.
  • capitalize ar lielo burtu tiek izmantots katra vārda pirmais burts atlasītajā tekstā.
  • none atstāj teksta burtu un lielo burtu lietojumu tieši tā, kā tas tika ievadīts.
  • inherit dod tekstam tā vecāku lielo un mazo burtu lietojumu.

Demo ir zemāk redzamajā lowercase, uppercaseun capitalizelietošanā. Apskatiet cilni HTML, lai redzētu, kā teksts sākotnēji tika rakstīts, pēc tam pārslēdzieties atpakaļ uz rezultātu cilni, lai to redzētu pēc CSS lietošanas.

Skatiet mariemosley (@mariemosley) vietnē CodePen Pen 0f4293fce0d14aafc3818c950ab0ded3.

Apskates vietas

capitalizelielajiem burtiem rakstīs vārdus, kas parādās vienā vai divkāršās pēdiņās, un pirmo burtu aiz defises. Tas netiks rakstīts ar lielo burtu pēc cipara, tāpēc tādi datumi kā “2015. gada 4. februāris” netiks pārveidoti par “2015. gada 4. februāris”.

capitalizeietekmē tikai vārdu pirmos burtus. Tas nemainīs vārdu pārējo burtu reģistru. Piemēram, ja jūs capitalizeizmantojat vārdu, kas jau ir ar lielajiem burtiem, pārējie vārda burti netiks pārslēgti uz mazajiem burtiem. Tas ir jauki, ja tekstā ir akronīms vai saīsinājums, kurā nevajadzētu ietvert mazos burtus.

CSS nevar izmantot lielo burtu lietojumu, lielo burtu lietojumu, ko lieto grāmatu, filmu, dziesmu un dzejoļu nosaukumos, kur raksti ir ar mazajiem burtiem (kā sadaļā “Pazudušās šķirsts reideri”). Bet nosaukuma lietai ir JavaScript risinājumi, tostarp Deivida Guša toTitleCase ().

Vairāk informācijas

  • teksta pārveidošana MDN
  • teksta pārveidošana W3C Spec
  • Piezīmes par lielo burtu teksta pieejamību no WebAIM

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
Jebkurš Jebkurš Jebkurš Jebkurš Jebkurš Jebkurš Jebkurš

Firefox atbalsta turku valodām, vācu, holandiešu un grieķu valodām raksturīgos lielo burtu lietojuma noteikumus, kurus citas pārlūkprogrammas neatbalsta. Firefox ir arī vienīgais atbalstītais pārlūks text-transform: full-width;, kas var palīdzēt uzlabot teksta lasāmību, kas ietver latīņu un Austrumāzijas skriptu sajaukumu. Sīkāku informāciju skatiet MDN.