解决文字溢出,换行等问题

最新推荐文章于 2024-05-11 17:05:39 发布

weixin_34402090

最新推荐文章于 2024-05-11 17:05:39 发布

阅读量869

点赞数

文章标签： javascript ViewUI

完美强制换行,必须之前设定高度

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>

weixin_34402090

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决文字溢出,换行等问题

完美强制换行,必须之前设定高度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不支持这里面有...
复制链接

扫一扫