text-box-trim

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

        
          
          .trimmed {  font-size: 3rem;  text-box-trim: trim-both;  text-box-edge: cap alphabetic;  background: pink;}.normal {  font-size: 3rem;  background: lightblue;}
          .trimmed {
  font-size: 3rem;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  background: pink;
}

.normal {
  font-size: 3rem;
  background: lightblue;
}

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

        
          
          .text-box-trim-syntax {  text-box-trim: trim-start;}
          .text-box-trim-syntax {
  text-box-trim: trim-start;
}

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

text-box-trim управляет удалением вертикальных запасов. Возможные значения:

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

Можно использовать шорткат text-box, чтобы задать text-box-trim и text-box-edge одной строкой:

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

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

Это будет равнозначно записи:

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

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

Браузеры при рендеринге текста обычно добавляют сверху и снизу небольшие пустые зоны, чтобы не обрезать части букв (например, диакритические знаки). Эти зоны влияют на итоговую высоту блока с текстом и могут мешать точному выравниванию.

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

Данное свойство работает только в связке с text-box-edge, которое определяет до какого уровня будут обрезаться пустые зоны.

💡 Упрощает вертикальное выравнивание текста без использования костылей вроде line-height, padding, transform и прочего.