There are several div blocks that go in a row from top to bottom. Each contains some text. At a hover event on a div text increases from 11 px to 13 px , while the height of the div slightly increases, which is why all the subordinate divs slide down, but this is ugly, as it turns out that the whole page jumps.
How can you make the downstream units do not move down? I can't set the fixed height of the div , because all div different heights. Maybe you can somehow set the div to the height that it takes when you increase the text inside the div ?

2 answers 2

If duplicate content is acceptable, then you can use this trick:

  • create a block that will serve as a container
  • inside the container to place a transparent block with the target font size, it will serve as a spacer
  • place a visible block inside the container with absolute positioning and dimensions equal to the size of the container to be transformed

This trick will allow you to handle any size line.

Below is a storyboard for explanation:

  • block strut only
  • target block over strut
  • target block only

 * { box-sizing: border-box; } .hover-me { border: 1px solid #000; font-size: 14px; padding: 10px; position: relative; } .hover-me .visible { font-size: 11px; } .hover-me .visible:hover { font-size: 14px; } .hidden { opacity: 0; pointer-events: none; } .visible { position: absolute; padding: 10px; left: 0; top: 0; width: 100%; height: 100%; } .demo-1 .hidden, .demo-2 .hidden { opacity: .25; } 
 <div class="hover-me demo-1"> <div class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt alias, natus perspiciatis ipsum aspernatur quae dignissimos atque dolorum blanditiis asperiores!</div> </div> <div class="hover-me demo-2"> <div class="visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quidem laborum et nam sit eaque, magni reiciendis libero quia, corporis.</div> <div class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quidem laborum et nam sit eaque, magni reiciendis libero quia, corporis.</div> </div> <div class="hover-me demo-3"> <div class="visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae eveniet neque soluta ducimus veniam harum aliquam tempora doloribus. Consequuntur, atque.</div> <div class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae eveniet neque soluta ducimus veniam harum aliquam tempora doloribus. Consequuntur, atque.</div> </div>

    I don’t know how legal it is at all, but try using line-height with the font value when enlarged. For example: https://jsfiddle.net/7xLf31mo/

     <div> <span>Текст</span> </div> <div> <span>Текст<br>текст</span> </div> *{ margin: 0; padding: 0; box-sizing: border-box; } div{ widhth: 100%; padding: 10px; color: #fff; text-align: center; background-color: red; margin-bottom: 10px; transition: all 0.2s linear; font-size: 11px; line-height: 13px; }