There is a block with a plate on top of it, like this:

.foo { font-family: Arial, sans-serif; font-size: 16px; width: 170px; height: 100px; background-color: #eef; border: 1px solid #77f; text-align: center; } .plashka { display: inline-block; background-color: #aaf; } 
 <div class="foo"> <div class="plashka"> Здесь нужно что-то длинное </div> </div>

The plate stretches to the full length of the parent block, and I want it like this - so that the plate has no internal indent either on the left or on the right:

 .foo { font-family: Arial, sans-serif; font-size: 16px; width: 170px; height: 100px; background-color: #eef; border: 1px solid #77f; text-align: center; } .plashka { display: inline-block; background-color: #aaf; } 
 <div class="foo"> <div class="plashka"> Здесь нужно что-то<br/>длинное </div> </div>

Is this possible without explicitly spelled out <br/> and without any restrictions on width? So that everything adapts itself to the text.

UPD: another example for clarity:

 .foo { font-family: Arial, sans-serif; font-size: 16px; width: 170px; background-color: #eef; border: 1px solid #77f; text-align: center; } .plashka { display: inline-block; background-color: #aaf; } 
 <div class="foo"> Как не надо: <div class="plashka"> а б в г д е ё еёжзийклмно </div> Как надо: <div class="plashka"> а б в г д е ё<br/>еёжзийклмно </div> <hr/> Как не надо: <div class="plashka"> а б в гдеё ж з и к л мнопрстуфх </div> Как надо: <div class="plashka"> а б в гдеё ж з и к л<br/>мнопрстуфх </div> </div>

  • one
    What does it mean to adapt to the text? Under one word, 2, 3? - wcobalt
  • padding parent can not be added? - teran
  • @wcobalt it means that the text completely fits into the block without unnecessary fields as in the first example, the number of words can be any number from zero to how many will fit into the operative) - andreymal
  • @teran is essentially the addition of restriction to the length of the descendant, the fields will decrease, but they will not disappear anywhere - andreymal
  • Added another example for clarity - andreymal

3 answers 3

Due to the peculiarities of the block formatting context (and that is the one inside the inline-block ), you will not be able to do this simply through CSS.

The solution on JS is:

 document.querySelector('.plashka').style.width = document.querySelector('.plashka__inner').getBoundingClientRect().width + 'px'; 
 .foo { font-family: Arial, sans-serif; font-size: 16px; width: 170px; height: 100px; background-color: #eef; border: 1px solid #77f; text-align: center; } .plashka { display: inline-block; background-color: #aaf; } 
 <div class="foo"> <div class="plashka"> <span class="plashka__inner">Здесь нужно что-то длинное</span> </div> </div>

    How about this? Not the most elegant solution, but without the transfer it will be maximized, so there are no such indents. To add them, I propose to retreat immediately from the foo block to the left and right.

     .foo { font-family: Arial, sans-serif; font-size: 16px; width: 170px; height: 100px; background-color: #eef; border: 1px solid #77f; text-align: center; } .plashka { display: inline-block; background-color: #aaf; margin: 0 20px; } 
     <div class="foo"> <div class="plashka"> Ваш длинный текст </div> </div>

    • The indentations inside the plate, although less than 20 pixels, are still present, that is, it is still stretched in vain. Plus, for example, the "Dliniyinny teeeekst" quite fit into one line, while with such a margin it takes two, which also does not suit me very much - andreymal

    Solution of the problem:

     .foo { font-family: Arial, sans-serif; font-size: 16px; width: 170px; height: 100px; background-color: #eef; border: 1px solid #77f; text-align: center; } .plashka { display: inline-block; background-color: #aaf; width: 90%; margin: 0 auto; } 
     <div class="foo"> <div class="plashka"> Здесь нужно что-то длинное </div> </div>

    • The fields of the indoor unit are still there, and on the text а б в г д е ё еёжзийклмно they are 27 pixels - andreymal