来源网络整理发布,仅用于学习交流使用。
完美强制换行,必须之前设定高度
word-wrap:break-word; word-break:break-all; -moz-binding: url('./wordwrap.xml#wordwrap'); overflow: hidden;
http://blog.csdn.net/guo_rui22/article/details/2301426 这里的答案 ff不支持
这里面有 强制不换行:white-space:nowrap; (所有的都支持).强制换行:word-break:break-all;(不支持ff)
http://www.cnblogs.com/analyzer/articles/1285732.html 这里 ie chrome ff 都支持
里边关于老外的资料:http://ecmascript.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
上代码
<html> <body> <div style="width:50px;height:200px;"> <span style="color:Red">自动换行的</span>你没你妹妹你没你妹妹你没你妹妹你没你妹 </div> <div style="width:50px;height:50px;white-space:nowrap"> <span style="color:Red">强制换行</span>你没你妹妹你没你妹妹你没你妹妹你没你妹妹你没你妹妹 </div> <div style="width:50px;height:250px;word-break:break-all"> <span style="color:Red">ff不支持</span>ssssssssssssssssssssssssssssssssssssssssssssssssss </div> <div style="width:50px;height:200px; word-wrap:break-word;word-break:break-all; -moz-binding: url('./wordwrap.xml#wordwrap');overflow: hidden;"> <span style="color:Red">所有都支持</span>ssssssssssssssssssssssssssssssssssssssssssssssss </div> <!--因为下面图片不是真正的图片 而有边框所以width>两个img之和 如有同学可以修改div的width为100,并且让它两个一组 那请联系我 --> <div style="width:110px;height:50px;"> <img src="#" width="50" height="50" style="border:none"> <img src="#" width="50" height="50" style="border:none"> <img src="#" width="50" height="50" style="border:none"> <img src="#" width="50" height="50" style="border:none"> </div> </body> </html>
来源网络整理。仅作参考。