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

转载 2013年12月04日 17:59:11

默认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>

span 固定宽度,内容自适应容器自动换行

span 固定宽度CSS: display:-moz-inline-box; display:inline-block; width:550px; 内容自适应容器宽度,自动换行:...
  • a437629292
  • a437629292
  • 2014年09月09日 10:09
  • 2729

span 文本内容超过宽度自动换行

span{word-break:normal; width:auto; display:block; white-space:pre-wrap;word-wrap : break-word ;...
  • sunnywujh
  • sunnywujh
  • 2015年01月22日 14:45
  • 229

关于span标签的宽度和高度设置

正常情况下我们设置span标签是无法设置span标签的宽度和高度的。那么怎样才能设置呢。个人感觉意义并不大,如果需要可以使用div。 span是有display:inline-block和float...
  • sinat_21125451
  • sinat_21125451
  • 2016年03月07日 15:34
  • 11340

html5 span设置宽度无效的问题

如果用css直接设置span的宽度百分比格式的,是没有效果的,需要设置display:block才能生效...
  • zhanyue4
  • zhanyue4
  • 2015年10月12日 11:09
  • 618

解决span自动换行以及样式margin的问题

因为span默认是行属性,而div默认是块属性,所以span是无法实现margin-top,margin-bottom,设置也会失效。 当然span也不根据长度自动换行。 解决办法: 1、把...
  • tingwufeixiang
  • tingwufeixiang
  • 2017年05月02日 11:05
  • 600

span内联元素元素设置宽

转载地址:there 元素display属性的常见值说明:     block:块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行。      inline:内联对象的默认值。将...
  • f1520107395
  • f1520107395
  • 2015年03月19日 16:38
  • 637

label和span标签设置宽度width无效问题的解决方式

在默认情况下,label和span标签设置width值是无效的。 需要设置display的值: label,span{ width:120px; display:block; } ...
  • unfire
  • unfire
  • 2016年08月10日 21:13
  • 5018

码农成长记——css ul li 中嵌套span

今天为了实现标题的分隔 在ul li 中嵌套了一个span 用css 规定大小然后float:right;结果|跑到span标签的范围之外去了 最后解决的方法是单独使用一个li把|包起来 经验:...
  • xueyue_zx
  • xueyue_zx
  • 2016年12月12日 21:02
  • 646

在CSS中span设置长度且不换行的方法

在页面中常常碰到 一行中需要显示固定的字数,而且不能换行,如上图所示,那该如何去做呢?对于span的代码该如何去写呢? 最新动态MORE 明确目标 务实求实,陕西交通支援加强师德建设...
  • u012088907
  • u012088907
  • 2014年12月22日 16:41
  • 1180

span设置不可点击

123 var selNum = function(){ return; alert(123) } 或者重新 设置span onclick 为null
  • qq_16055765
  • qq_16055765
  • 2016年11月15日 14:01
  • 3521
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于span不能设置宽度及span自动换行的解决方法
举报原因:
原因补充:

(最多只允许输入30个字)