关于span不能设置宽度及span自动换行的解决方法

最新推荐文章于 2023-11-29 22:12:00 发布

转载最新推荐文章于 2023-11-29 22:12:00 发布 · 762 阅读

css 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了如何解决span元素宽度设置失效的问题，并提供了CSS代码实现完美解决方案，适用于多种浏览器版本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

默认span的宽度是自适应内容的。

span标记的样式设定width属性：

加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这一句，span的宽度失效，会发现不会产生效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
新闻标题2006-5-27
</body>
</html>

如果设置display:block，width属性生效，但是此时的span跟div一样了。 DIV会自动换行

span不是块级的所以其宽度是依据内容的多少而定，你必需要设定span为BLOCK这样才可以设置宽度！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
新闻标题2006-5-27
</body>
</html>

如果设置display:inline-block，则span并列在同行，而且width属性生效。

元素display属性的常见值说明：

block：块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行。
inline：内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行。
inline-block：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。
non：隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间。

设置 span 宽度的完美解决方案（ 不自动换行）

下面代码的 CSS定义完美解决了span的宽度设置问题。代码可以同时兼容IE/FF各种版本。
<style type="text/css">
span { background-color:#ffcc00; display:-moz-inline-box; display:inline-block; width:150px;}
</style>