There is a div tag with an h1 element inside. Text inside h1 added dynamically from the form. By default, the width of the div is 300рх , and the text size is 60рх . If the number of characters in one word fits in this width, then when you transfer words, the block increases in height.
The task is to expand the div to the width when the number of characters in one word does not fit into these 300рх .
Can this be done using only CSS or just using JS ?

  • use not width, a min-width? - NeedHate
  • in this case, the div is stretched to full screen - Bootuz

1 answer 1

I think you can do it like this

 div {display: inline-block;background-color:red;color:white;min-width:300px;} 
 <div> <h1>Этот текст не вместился в 300px</h1> </div>