Css - 将框的宽度调整为文本

Question

我需要将框的宽度调整为文本

这是html代码：

<span class="box">Testing content of the box</span>

这是css代码：

.box {
    padding-left:5px;
    padding-right:5px;
    color: #fff;
    background-color: #ff9c00;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    display: inline-block;
}

会是这样的：

或者这个：

无论文本大小如何，始终应该左右相同的填充。

我怎么能这样做？

Answer 1

＆＃13;

＆＃13;

.box {
  padding:10px;
  color: #fff;
  background-color: #ff9c00;
  float: left;
  clear: both;
  margin-bottom:10px;
  border-radius:3px;
  max-width:400px;
  text-align:justify;
}

＆＃13;

<span class="box">Content</span>

<span class="box">Content, and even more content and even more content and even more content and even more content and even more content </span>

＆＃13;

＆＃13;

＆＃13;

希望它有所帮助!!

Answer 2

将float: left与clear: both

结合使用

.box {
  padding-left: 5px;
  padding-right: 5px;
  color: #fff;
  background-color: #ff9c00;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  float: left;
  clear: both;
  margin-bottom: 1em;
}

<span class="box">Content</span>

<span class="box">Content, and even more content</span>

Answer 3

width: auto;应该在这里诀窍

.box {
    padding-left:5px;
    padding-right:5px;
    color: #fff;
    background-color: #ff9c00;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    width: auto;
    display: inline-block;
    margin-bottom: 5px;
}

<span class="box">Testing content of the box</span>

<span class="box">Testing content of the box Testing content of the box Testing content of the box Testing content of the box </span>

Answer 4

使用min-width和max-width设置分割的最小和最大尺寸。

＆＃13;

＆＃13;

.box {
  padding:10px;
  color: #fff;
  background-color: #ff9c00;
  float: left;
  clear: both;
  margin-bottom:10px;
  border-radius:3px;
  max-width:400px;
}

＆＃13;

<span class="box">Content</span>

<span class="box">Content, and even more content and even more content and even more content and even more content and even more content </span>

＆＃13;

＆＃13;

＆＃13;