make span tag show full background instead wrapping in responsive

Question

In responsive

span

is not showing full background.

It shows proper up to 836 pixels after less than that it wraps in another line, I want that only wrap text not background.

How to show full background?

Snippet

span{

  background: red;

  color: white;

  padding: 50px;

  border-radius: 5px;

  text-align: center;

  font-family: arial;

  font-size: 20px;

}

<span>In responsive span is not showing full background. How to show full background?</span>

Answer 1

set inline-block to span, because span is an inline element

span{
  background: red;
  color: white;
  padding: 50px;
  border-radius: 5px;
  text-align: center;
  font-family: arial;
  font-size: 20px;
  display:inline-block
}

<span>In responsive span is not showing full background. How to show full background?</span>

make span tag show full background instead wrapping in responsive

Sign up