Перетворення тексту - 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 не може використовувати "регістр заголовків", стиль написання великих літер, що використовується в назвах книг, фільмів, пісень та віршів, де статті мають малу літеру (як у "Рейдерах загубленого ковчега"). Але є варіанти JavaScript для регістру заголовка, зокрема toTitleCase () Девіда Гуша.

Більше інформації

  • перетворення тексту в MDN
  • перетворення тексту в специфікації W3C
  • Примітки щодо доступності великого тексту з WebAIM

Підтримка браузера

Chrome Сафарі Firefox Опера IE Android iOS
Будь-який Будь-який Будь-який Будь-який Будь-який Будь-який Будь-який

Firefox підтримує правила використання великих літер для тюркських мов, німецької, голландської та грецької мов, які не підтримуються іншими браузерами. Firefox також є єдиним браузером, який підтримує text-transform: full-width;, що може допомогти покращити читабельність тексту, що включає суміш латинських та східноазіатських скриптів. Детальніше див. На MDN.