How to force not vylazit text abroad when scaling the browser window? Here is a sample code: Jsfiddle

<div class="container"> <div class="header__today"> <div class="current_date"> <div class="current_date__day">23</div> </div> </div> <div class="header__today"> <div class="current_date"> <div class="current_date__day">23</div> </div> </div> <div class="header__today"> <div class="current_date"> <div class="current_date__day">23</div> </div> </div> <div class="header__today"> <div class="current_date"> <div class="current_date__day">23</div> </div> </div> </div> .container { width: 100%; margin: 0 auto; } .header__today { border-top: 5px solid black; float: left; width: 25%; color: #fefefe; box-sizing: border-box; background-color: green; } .current_date { font-size: 150px; margin: 43px auto 0 32px; &__day { line-height: 150px; border: 1px solid #fefefe; } }

It is necessary to make it so that 23 does not climb over the drawn border or that 23 moves the border apart. With js, I solved this problem, but I want a better solution without using js.

  • When you increase the scale? I have something like this: s06.radikal.ru/i179/1605/f8/a0ae77454385.png - Anton Erofeev
  • No, I want the header__today blocks to be proportionally smaller and remain in the same row. In this case, it is necessary that the inscription 23 was always in sight inside the frame. - Anton Erofeev
  • Thanks, got it. So either js or media queries. - Anton Erofeev
  • one
    Well, in fact, take a closer look at the cross-browser compatibility, in most cases partitial support is enough - Duck Learns to Hide
  • Comments in response povynosil - Duck Learns to Take Cover

1 answer 1

If you take solutions on pure css, then:

First of all

You can set the font size relative to the size of the viewport.
Something like:

 .current_date { font-size: 10vw; /* подобрать размеры вручную, в зависимости от верстки*/ /* все остальное */ }

1vw = 1% of the width of the viewport.
1vh = 1% of the height of the viewport.
1vmin = the lesser of 1vw, 1vh.
1vmax = greater of 1vw, 1vh.

The solution is certainly not super reliable , a dozen different known errors, but very convenient.

Secondly
You can use media queries and change the font size yourself in those thresholds where the layout starts to roll in, but for me it’s better js.

  • Oh, what is this "viewport" such in Russian? - edem
  • one
    @edem, May is bad Gavarit Ruski. Tyva karasho - your rule) - Duck Learns to Hide
  • Here the famous phrase of Stanislavsky is appropriate: "I do not believe it!"; Well, okay, fix it is simple, since so. - edem
  • @edem, I mean that the "viewport" is a term. Well, I do not know how to successfully translate it. The "field of view" seems to indicate what is needed. But if you say “field of view”, they will ask you what you mean. If you say viewport, they will understand. As they usually say, "this is our singleton," and not translated. - Duck Learns to Take Cover
  • Well, singleton, as a rule, is called "loner", but in general, yes, there is a problem with the translation of many terms, but it is better to write a term in the original than its pronunciation, if there is no normal translation, I mean vieport, etc. - edem