ruby-overhang

Свойство ruby-overhang определяет, может ли руби-подпись (<rt>) выходить за пределы основного текста (<ruby>) и частично накладываться на соседний контент.

        
          
          <ruby class="auto">  表  <rp> (</rp>  <rt>поверхность</rt>  <rp>) </rp></ruby><ruby class="none">  現  <rp> (</rp>  <rt>проявление</rt>  <rp>) </rp></ruby>
          <ruby class="auto">
  表
  <rp> (</rp>
  <rt>поверхность</rt>
  <rp>) </rp>
</ruby>
<ruby class="none">
  現
  <rp> (</rp>
  <rt>проявление</rt>
  <rp>) </rp>
</ruby>

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

        
          
          .auto {  ruby-overhang: auto;}.none {  ruby-overhang: none;}
          .auto {
  ruby-overhang: auto;
}

.none {
  ruby-overhang: none;
}

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

        
          
          ruby {  ruby-overhang: auto;}
          ruby {
  ruby-overhang: auto;
}

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

Допустимые значения:

auto — разрешает выходить руби-подписи за границы основного текста, если это необходимо;
none — запрещает выход аннотации за пределы блока <ruby>.

Если аннотация слишком длинная, браузер по умолчанию может позволить ей немного выступить за границы базового текста. Это помогает избежать сжатия текста или нарушения ритма строки.

Если же вы хотите, чтобы аннотации строго укладывались в рамки, используйте ruby-overhang: none.

💡 Свойство ruby-overhang полезно, когда:

• аннотация длиннее базового текста (например, фуригана к иероглифу);
• вы хотите сохранить аккуратную типографику;
• нужно избежать наложений с другими элементами.