Is it possible in css to specify a block with a set maximum width, that if the text does not fit in 1 line, then you need not the maximum width, but specifically the width of the text?

Those. so that the first block looks like 2.

.test { max-width: 500px; background: red; padding: 10px; word-wrap: normal; } .test2 { max-width: 380px; background: red; padding: 10px; } 
 <div class="test"> Введите адрес Вашей электронной почты, например, text@example123.ru. </div> <br/> <div class="test2"> Введите адрес Вашей электронной почты, например, text@example123.ru. </div>

  • Is changing max-width to min-width not suitable? + float: left - Maximmka
  • @Maximmka, does not fit. This is a tooltip. If you do not specify max-width, it will be full screen wide. - Sapphiron

1 answer 1

You can try using min-width and display: inline-block , an example in the test3 class. Property word-break: break-all; from test4 transfers not fit characters.

 .test { max-width: 500px; background: red; padding: 10px; word-wrap: normal; } .test2 { max-width: 380px; background: red; padding: 10px; } .test3 { display: inline-block; min-width: 380px; background: red; padding: 10px; } .test4 { max-width: 380px; background: red; padding: 10px; word-break: break-all; } 
 <div class="test"> Введите адрес Вашей электронной почты, например, text@example123.ru. </div> <br/> <div class="test2"> Введите адрес Вашей электронной почты, например, text@example123.ru. </div> <br/> <div class="test3"> Введите адрес Вашей электронной почты, например, text@example123.ru. </div> <br/> <br/> <div class="test4"> Введите адрес Вашей электронной почты, например, text@example123.ru. </div>

  • Unfortunately, as I wrote above, max-width is needed so that the pop-up window is not wider than the screen. Apparently, you have to leave it like this or use word-break: break-all . - Sapphiron