CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了CSS宽度/最大宽度在线包装?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
#tooltip
{ 
    position: absolute;
    width:auto;
    min-width:50px;
    max-width:250px;
    padding:10px;
    background-color:#eee;
    border:1px solid #aaa;
}

基于这种风格,我希望我的工具提示缩小或增长,以适应内容,最低可达50像素或高达250像素.但是,当内容包装到下一行时,max-width属性似乎超越了我的width属性.一句话结尾的词很长,看起来像是留下一堆填充(见截图),这是一种美学的事情.那是正常的行为吗?

解决方法

是的,这是正常的行为.

浏览器将尝试将文本内嵌到框中,直到其最大允许宽度达到250px,然后将其后续行包含在第一行无法适用的任何文本. (如果没有足够的文字来达到最大宽度,那么width:auto会使框缩小,以适应那个数量的文本.)

但是,包装后,该框不会再缩小以适应文本,因为文本包装不会以这种方式工作.这意味着该框的宽度计算为250像素,只因为您的CSS规定它最多只能为250像素.没有计算到一些较小的值等于文本的宽度,然后被max-width覆盖.

我不认为有什么可以改变这种行为.

大佬总结

以上是大佬教程为你收集整理的CSS宽度/最大宽度在线包装?全部内容,希望文章能够帮你解决CSS宽度/最大宽度在线包装?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: