Интервал между думи - CSS-трикове

Anonim

В word-spacingимота е подобен letter-spacing, макар и естествено употребата му урежда размера на пространството между думите в част от текст, а не на отделните герои.

p ( word-spacing: 2em; )

word-spacing може да получи три различни стойности:

  1. ключовата дума „нормална“, която нулира разстоянието по подразбиране
  2. стойности на дължината с помощта на всякакви CSS единици (най-често px, em, rem)
  3. ключовата дума „наследяване“, която прилага word-spacingна родителския елемент

Най-добрата практика по това време би била да се използва em. Размерът на шрифта може да се регулира, така че използването на пиксели за това може да доведе до проблеми при разстоянието между думите, което няма да се мащабира както размерът им. remобикновено е чудесно, но поддръжката на браузъра е по-ниска и в този случай вероятно е най-добре разстоянието да се отнася директно към думите, към които се прилага, а не към корена.

Важно е да се отбележи, че „дума“ в този контекст всъщност се отнася до единично парче вградено съдържание - което означава, че word-spacingзасяга inline-blockкакто елементи, така и inlineелементи. В този пример няколко такива елемента се раздалечават чрез задаване word-spacingна техния родителски контейнер:

Вижте тази писалка!

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

  • В word-spacingимота е animatable с CSS преходи.
  • Въпреки че използването на стойността „процент“ за определяне на разстоянието е разрешено според спецификацията, това може да доведе до непредсказуеми резултати - често просто никакъв ефект.
  • Задаването на бяло пространство на нула е един от начините за борба с пространството между вградените блокови елементи.

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

Chrome Сафари Firefox Опера IE Android iOS
Върши работа Върши работа Върши работа Върши работа Върши работа Повечето Върши работа

Бележка за поддръжката на браузър Android: По-голямата част от устройствата с Android поддържат word-spacing, но някои устройства, използващи компилации на Webkit, различни от Apple, или браузъра Netfront не го правят. Подробностите са описани подробно в връзката QuirksMode по-горе.