text-box

Свойство text-box является шорткатом и объединяет в себе text-box-trim и text-box-edge. Оно позволяет обрезать лишнее вертикальное пространство над и под текстом, подгоняя его под важные линии шрифта: верхушки заглавных букв (cap), высоту строчных (ex), базовую линию (alphabetic) и другие.

        
          
          .one {  text-box: trim-end cap alphabetic;}.two {  text-box: trim-both ex alphabetic;}
          .one {
  text-box: trim-end cap alphabetic;
}

.two {
  text-box: trim-both ex alphabetic;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .something {  text-box: text-box-trim text-box-edge;}
          .something {
  text-box: text-box-trim text-box-edge;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Свойство text-box — это шорткат, который объединяет два свойства:

• text-box-trim — указывает, какие края текстового блока обрезать: сверху (trim-start), снизу (trim-end) или оба сразу (trim-both);
• text-box-edge — указывает, по каким линиям шрифта происходит обрезка: например, по верхней границе заглавных букв (cap), по x-высоте — верхнему краю строчных букв вроде x, n, o (ex), по базовой линии (alphabetic) или по умолчанию ничего не обрезать (text).

• none — не обрезать;
• trim-start — обрезать только верхний край;
• trim-end — обрезать только нижний край;
• trim-both — обрезать оба края (значение по умолчанию).

Можно указать один или два ориентира.

Один ориентир (применяется к обоим краям):

        
          
          .something {  text-box: trim-both cap;}
          .something {
  text-box: trim-both cap;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Два ориентира (первое — для верхнего края, второе — для нижнего):

        
          
          .something {  text-box: trim-both cap alphabetic;}
          .something {
  text-box: trim-both cap alphabetic;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Возможные ориентиры:

• cap — верх заглавных букв;
• ex — верх строчной буквы x;
• alphabetic — базовая линия;
• ideographic— линия, по которой выравниваются иероглифы в азиатских шрифтах.
• ideographic-ink — то же, что ideographic, но с учётом чернил, выходящих за пределы символа.
• auto — выбор браузера (по умолчанию).

Когда браузер отрисовывает текст, он добавляет вертикальные отступы сверху и снизу строки. Эти отступы зависят от шрифта и включают:

• подступы для восходящих элементов (б, й, ё);
• подступы для нисходящих (у, р, ц);
• внутренние отступы шрифта (называются leading).

Восходящие элементы — это части букв, выходящие выше основной части строки (например, б, й, ё), а нисходящие — те, что опускаются ниже базовой линии (у, р, ц).

Из-за этого текст может выглядеть как будто «висит» в блоке, а фон или рамка оказываются не выровнены по буквам. Свойство text-box позволяет убрать эти лишние отступы и сделать так, чтобы:

• верхний край блока совпадал, например, с верхушками заглавных букв (cap);
• нижний край — с базовой линией (alphabetic) или высотой строчных (ex).

💡 Поддержка свойства указана на Can I Use.

💡 Вместо использования border для визуализации эффекта, вы можете использовать свойство outline. Оно не влияет на размеры элемента и не увеличивает высоту строки, в отличие от border.

💡 Часто используемое значение шортката trim-both cap alphabetic убирает ненужные воздушные карманы сверху и снизу.

💡 Лучше всего работает в комбинации с line-height, когда нужен плотный вертикальный ритм в дизайне.