默认span的宽度是自适应内容的。
span标记的样式设定width属性：
<html>
<body>
<span style="width:80%">新闻标题</span><span style="20%">2006-5-27</span>
</body>
</html>
加上<!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>
<span style="width:80%">新闻标题</span><span style="20%">2006-5-27</span>
</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>
<span style="width:80%; display:block; float:left; ">新闻标题</span><span style="20%">2006-5-27</span>
</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>
|
分享到：
相关推荐
但是，如果输入的是英文字母，那么，无论你div设定宽度为多少，英文字母都是不换行直接在同一行输出，导致div的宽度远远超出设定的大小。 原因：这是因为div中，英文字母之间没有空格的话，它会默认认为这是一个...
Span的宽度依照包围着对象的宽度而定，所以不能用宽度属性width设置span标记内对象的宽度，但可以设置span的margin（外补丁）值，span中的对象位置与父对象的距离 l Div 块元素 100% 会换行 l Span 行内元素 ...
在项目中我们经常需要在文本过长时显示，将文本超出的部分内容用省略号代替： 思想为： 首先设置宽度，然后让超出的部分隐藏 如果有超出则在最后显示省略号 让文本不换行 具体css代码为： 复制代码代码如下:.title{...
// 方法1:用Row + Col 定义自己需要的宽度,把layout属性设置为'horizontal', const formLayout = { labelCol: { span: 4 }, wrapperCol: { span: 14 }, } --------------------------------------------------...
碰到一个问题，就是在页面展示的时候，很多情况下需要对显示的文字做折行处理，例如文字超过TD的宽度，或者DIV的宽度等等。... 条件所限，blog不能上传附件，我在这里解释一下代码。 代码有2部分，一个是“tex
标签的显示模式（重点） div和span标签 1.样式完全相同，标签不同，显示的结果完全不同 2.每个div会独占一行，多个span会并列一排 1.块元素 ...特点：只能设置宽和高，不能换行显示—img input
span标签 当内容超出 强制不断行 自动换行 复制代码代码如下: white-space:nowrap;white-space:norma;display:inline-block; 超出自动隐藏 英方不断行显示 (必须在块元素内) 复制代码代码如下: overflow:hidden;...
标签的显示模式（重点） div和span标签 1.样式完全相同，标签不同，显示的结果完全不同 ...特点：只能设置宽和高，不能换行显示—img input 示意图 多学一招：从大的方面来说，其实行内的块元素也属于行内元素
不能调节框架大小.html 演示不能调节框架大小。 不支持框架.html 演示不支持框架情况。 垂直分栏.html 演示垂直分栏。 导航框架.html 导航框架的用法。 导航框架链接.html 导航框架链接的用法...
-尽管TabStrip, From, Tree, Accordion继承了Items属性，但是你并不能对其设置（此时Items是只读的）. -这将会影响所有的aspx页面，一定要将工具条（Toolbars）和Items区分开来。 -祝你生日快乐 - 小师妹妹。 ...
-尽管TabStrip, From, Tree, Accordion继承了Items属性，但是你并不能对其设置（此时Items是只读的）. -这将会影响所有的aspx页面，一定要将工具条（Toolbars）和Items区分开来。 -祝你生日快乐 - 小师妹妹。 ...
css盒模型：块级元素，内联元素，内敛块状元素，none使元素隐身，设置宽度、高度、背景色、边框、圆角，padding内边距，margin外边距； css布局模型：流动模型flow，浮动模型float，层模型layer，层模型的绝对定位、...
第一：行内元素与宽度 宽度不起作用 复制代码代码如下: span { width:200px; } 没有变化 第二：行内元素与高度 高度不起作用 复制代码代码如下: span{ height:200px; } 没用变化 第三：行内元素与padding,...
2.3.6 设置网页文字及语言 22 2.3.7 设置网页的定时跳转 23 2.3.8 设定有效期限 24 2.3.9 禁止从缓存中调用 24 2.3.10 删除过期的cookie 25 2.3.11 强制打开新窗口 25 2.3.12 设置网页的过渡效果 26 ...
虽然用动态语言可以对其控制，但是这样做是不利于搜索引擎收录的，而CSS很巧妙地解决了这个问题，请看下面的代码： 代码一：用于非表格LI或span等都可以 复制代码代码如下:.text-overflow { display:block;/*内联...
行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化 块级元素可以设置 width, height属性，行内元素设置width, height无效 （注意：块级元素即使设置了...
9.2.2 设置表格边框线条宽度(border属性) 9.2.3 设置表格宽度(width属性) 9.2.4 表格在页面中的对齐(align属性) 9.2.5 表格的描述(summary属性) 9.2.6 表格的背景色(bgcolor属性) 9.2.7 表格中单元格的间距和衬距...
这种样式只会对当前标签起作用，不能对样式进行复用，不方便后期维护，不推荐使用 2.内部样式表 将样式表编写到head中的style标签中 <style type="text/css"></style> 使用内部样式表，进一步将表现和结构...
11.7 设置元素的高度和宽度 214 11.8 在元素周围添加内边距 217 11.9 设置边框 219 11.10 设置元素周围的外边距 222 11.11 使元素浮动 224 11.12 控制元素浮动的位置 226 11.13 对元素进行相对...