Block elements take full width when text wraps on to two lines -

I am basically only curious about this because I see it all the time and any person told me to know There is a solution that does not happen.

Usually when I see it for a fancy-looking button around it and displays block or inline blocks.

The issue is: Say you have a button inside the divas that have a specific width, say 160px, and you have inside the display blocks or inline-blocked, if inside the cante Let's fit the text on one line, it wraps on two according to your expectation, but now it is on two rows, now it does not need to take the full width of the div, but it does! I do not really believe that this happens, but I was wondering if anyone knew about CSS or even JS solution that resolves this?

  
  
   
 
 
 What works for you?    & lt; Div style = "width: 160px; padding: 10px; background: blue;" & Gt; & Lt; A href = "#" style = "background: red; display: table; width: 1%" & gt; A long-range test & lt; / A & gt; & Lt; / Div & gt; & Lt; Span style = "padding-left: 130px" & gt; ^ Where the element & lt; / Span & gt;