内容自动换行的探究

最新推荐文章于 2024-07-20 19:30:22 发布

jaycxing

最新推荐文章于 2024-07-20 19:30:22 发布

阅读量410

点赞数

分类专栏： html/css 文章标签：浏览器 list firefox ie div

本文链接：https://blog.csdn.net/jaycxing/article/details/5866550

版权

html/css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天看到一道笔试题：

如何在 IE 中如何让连续的英文字符折行显示，如何让它在 FF 下也折行？

答： IE下 width:200px;word-break:break-all;

FF下无能为力

实际的情况是：连续的英文字母或者数字，都认识是一个单词，所以不会换行。

对于div

1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。

1）#wrap{white-space:normal; width:200px; }//white-space:normal意思是空白会被浏览器忽略。
或者
2）#wrap{word-break:break-all;width:200px;}

<div id="wrap">ddd111111111111111111111

1111111111111</div>

效果：

1）可以换行，换行的效果是以单词为单位，整个的

2）完全换行，不以单词为单位，到200px了就换。

2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！

#wrap{width:200px; overflow:hidden;} 隐藏的效果
或者
#wrap{width:200px; overflow:auto; } 出现滚动条的效果

<div id="wrap">ddd111111111111111111111

1111111111111111111</div>

效果：容器正常，内容隐藏或出现滚动条

jaycxing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
内容自动换行的探究

<br />今天看到一道笔试题：<br /><!-- /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:SimSun; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232
复制链接

扫一扫