网页制作 
首页 > 网页制作 > 浏览文章

谈自适应宽度

(编辑:jimmy 日期: 2025/5/1 浏览:3 次 )
大概需求和情况是这样的.今天提交的代码自我感觉是比较好的一版了,代码质量和个人编程知识/经验等紧密相关,不求最好,但求better and better.在这里做一个总结文,基于之前《换行情况处理》、《又谈换行情况处理》、《换行情况处理之三》及没来得及记录的经验。

当内容超出父级元素宽度,在未设置white-space:nowrap时会自动换行,设置了white-space:nowrap样式又不能关联到滚动条延伸的部分,解决方案如下:

1、在父级元素添加white-space:nowrap属性;

2、计算(每一行)内容宽度;

a、将内容拆分,包括缩进、图片和文字。

b、利用《又谈换行情况处理》中在body末尾添加非换行dom元素计算文字宽度。

c、叠加拆分的小块宽度为总宽度。

3、去掉父级元素的white-space:nowrap属性;

4、取2中最大宽度,设置成父级元素的宽度(最好在该精确宽度的基础上增加6px-8px的宽度预留给滚动条,一是满足滚动条出现,二是也不会贴边)。

该方法优点(与之前几种方案相比):

1、宽度计算准确。

2、性能稳定,没有之前循环“试探”的过程,遍历一遍节点即可完成。

What's more, 工作总是在种种业务场景之下的,像上面解决的这个问题就是。
上一篇:css中link和@import的区别分析详解
下一篇:CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。