日期:2014-05-17  浏览次数:20844 次

<span>标签添加到<div>中不能自动换行
<div id="word"></div>
我每次按一个按钮就是执行下面代码
$("span").appendTo("#word");
但是当<span>超出<div id="word">时,不会自动换行,而是一直横向添加过去。
但是我又不想用display:block; 然后加float:left这样。因为这样的话,就看不到
<div id="word">了。
请问有什么办法解决。(补充:有时候span带中文时候是可以自动换行的,真是奇怪)

------解决方案--------------------
加个样式试下

#word{
    word-wrap:break-word;
}

------解决方案--------------------
楼上正解。 这是因为 span 不是块状元素。本身自带有 左浮动的效果,并且连续的英文字母跟数字是没办法 自动换行的 必须要 强制换行。 但是光用楼上的那一句 是不行的。所以 必须要在限制了 宽度的情况下 还要增加 white-space:normal
------解决方案--------------------
引用:
楼上正解。 这是因为 span 不是块状元素。本身自带有 左浮动的效果,并且连续的英文字母跟数字是没办法 自动换行的 必须要 强制换行。 但是光用楼上的那一句 是不行的。所以 必须要在限制了 宽度的情况下 还要增加 white-space:normal

+1
------解决方案--------------------
引用:
加个样式试下

#word{
    word-wrap:break-word;
}

------解决方案--------------------
加width和display:table;
span{width:50px;display:table;}
------解决方案--------------------
中文自动换行确实很头疼,word-wrap:break-word;纯英文没问题,但是碰到中文就就失效了