Преобразуване на текст - CSS-трикове

Anonim

В text-transformимота в CSS контролира текст случай и капитализация.

.lowercase ( text-transform: lowercase; )

Стойности за преобразуване на текст

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

Демото по-долу показва lowercase, uppercaseи capitalizeсе използва. Погледнете раздела HTML, за да видите как текстът е написан първоначално, след което превключете обратно към раздела резултати, за да го видите след прилагането на CSS.

Вижте писалката 0f4293fce0d14aafc3818c950ab0ded3 от mariemosley (@mariemosley) на CodePen.

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

capitalizeще изписва с главни букви думи, които се появяват в единични или двойни кавички, и първата буква след тире. Той няма да изписва с главна буква първата буква след число, така че датите като „4 февруари 2015 г.“ няма да се трансформират в „4 февруари 2015 г.“.

capitalizeзасяга само първите букви на думите. Това няма да промени регистъра на останалите букви в една дума. Например, ако имате capitalizeдума, която вече е с всички главни букви, останалите букви в думата няма да превключат на малки букви. Това е хубаво, когато вашият текст включва съкращение или съкращение, които не трябва да включват малки букви.

CSS не може да направи „случай на заглавие“, стил на изписване с главни букви, използван в заглавия на книги, филми, песни и стихотворения, където статиите са с малки букви (както в „Raiders of the Lost Ark“). Но има решения за JavaScript за заглавието, включително toTitleCase () на Дейвид Гуш.

Повече информация

  • преобразуване на текст в MDN
  • преобразуване на текст в W3C Spec
  • Бележки за достъпността на главен текст от WebAIM

Поддръжка на браузър

Chrome Сафари Firefox Опера IE Android iOS
Всякакви Всякакви Всякакви Всякакви Всякакви Всякакви Всякакви

Firefox поддържа специфични за езика правила за изписване с главни букви за тюркски езици, немски, холандски и гръцки, които не се поддържат от други браузъри. Firefox е и единственият браузър, който поддържа text-transform: full-width;, което може да помогне за подобряване на четливостта на текста, който включва комбинация от латински и източноазиатски скриптове. Вижте подробности в MDN.