<span>标记的CSS宽度</span>

Question

我在模块标题中使用<span>标签， 例如

<span>Categories</span>.

我在css中指定了span的背景颜色/图像，宽度和高度。

但跨度的宽度取决于其内容/文字。

所以，如果我做<span></span>，只用css中的背景图片/颜色，就不会出现任何内容。

当然，我想要出现一些东西。

我该如何解决这个问题？

Answer 1

spans默认为内联样式，您无法指定宽度。

display: inline-block;

将是一个好方法，除了IE不支持它

但是，你可以hack a multiple browser solution

Answer 2

您可以将display属性显式设置为“block”，因此它的行为类似于块级元素，但在这种情况下，您应该只使用div。

<span style="display:block; background-color:red; width:100px;"></span>

Answer 3

您无法使用内联显示指定元素的宽度。你可以把一些东西放进去，就像一个不间断的空格（），然后设置填充以增加一些宽度但你不能直接控制它。

您可以使用display inline-block但不受广泛支持。

真正的黑客就是将图像放入其中然后设置其宽度。像透明1像素GIF的东西。但不是推荐的方法。

Answer 4

我会使用padding属性。这将允许您在元素的任一侧添加一定数量的像素，而不会使元素失去其跨度质量：

• 它不会成为块
• 它将按预期漂浮

此方法只会添加到填充中，因此，如果更改内容的长度（例如，从“类别”更改为“标记”），内容的大小将会更改，并且元素的整体大小也会更改。但是如果你真的想要设置一个刚性大小，你应该如上所述并使用div。

有关框模型，内容，填充，边距等的更多详细信息，请参阅box model。

Answer 5

与其他答案一样，请使用以下命令启动span属性：

display:inline-block;  

现在您可以使用填充而不是宽度：

padding-left:6%;
padding-right:6%;

使用填充时，颜色会扩展为两侧（左右），而不是恰到好处（就像在widht中一样）。

Answer 6

使用属性'display'，例如：

<span style="background: gray; width: 100px; display:block;">hello</span>
<span style="background: gray; width: 200px; display:block;">world</span>

Answer 7

修正了高度和宽度后，如果文本中的文字溢出其区域，则应告诉他们如何表现。所以加入css

溢出：自动;

Answer 8

你可以试试width: fit-content

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content