使 span 标签显示完整背景而不是响应式包装

Question

响应式 span 未显示完整背景。

它在小于换行后最多显示 836 像素，我希望只换行文本而不换行背景。

如何显示完整背景？

片段

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

将inline-block设置为span，因为span是行内元素

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>

使 span 标签显示完整背景而不是响应式包装

make span tag show full background instead wrapping in responsive

html

css

responsive-design

responsive