Трансформација текста - ЦСС-трикови

Anonim

text-transformИмовина у ЦСС контролише текста случај и слова.

.lowercase ( text-transform: lowercase; )

Вредности трансформације текста

  • lowercase чини сва слова у изабраном тексту малим словима.
  • uppercase чини сва слова у изабраном тексту великим словима.
  • capitalize великим словом ставља прво слово сваке речи у изабраном тексту.
  • none оставља мала и велика слова текста онако како су унета.
  • inherit даје тексту падеж и велика слова његовог родитеља.

Демо испод показује lowercase, uppercaseи capitalizeу употреби. Погледајте картицу ХТМЛ да бисте видели како је текст првобитно написан, а затим се вратите на картицу резултата да бисте је видели након примене ЦСС-а.

Погледајте оловку 0ф4293фце0д14аафц3818ц950аб0дед3 од мариемослеи (@мариемослеи) на ЦодеПен-у.

Тачке од интереса

capitalizeписаће великим словом речи које се појављују у једноструким или двоструким наводницима и прво слово након цртице. Неће писати великим словом прво слово након броја, па се датуми попут „4. фебруара 2015“ неће трансформисати у „4. фебруара 2015“.

capitalizeутиче само на прва слова речи. То неће променити случај осталих слова у речи. На пример, ако већ capitalizeимате реч која је у свим великим словима, друга слова у речи неће се пребацити на мала слова. Ово је лепо када ваш текст садржи кратицу или скраћеницу која не би требало да садржи мала слова.

ЦСС не може да користи „случај великих слова“, стил писања великих слова који се користи у насловима књига, филмова, песама и песама, где су чланци малим словима (као у „Раидерс оф тхе Лост Арк“). Али, постоје ЈаваСцрипт решења за велика слова, укључујући тоТитлеЦасе () Давида Гоуцха.

Више информација

  • трансформација текста на МДН
  • трансформација текста у спецификацији В3Ц
  • Напомене о приступачности великог текста са ВебАИМ-а

Подршка прегледача

Хром Сафари Фирефок Опера ИЕ Андроид иОС
Било који Било који Било који Било који Било који Било који Било који

Фирефок подржава специфична правила за писање великих слова за турске језике, немачки, холандски и грчки који други прегледачи не подржавају. Фирефок је такође једини прегледач који подржава text-transform: full-width;, што може помоћи у побољшању читљивости текста који укључује комбинацију латиничног и источноазијског писма. Погледајте детаље на МДН.