我在一个相对定位的容器中有一个绝对定位的文本块.绝对定位的元件超过其容器的右边界.
问题是:文本没有正常包装;它过早破坏而不是扩展到其定义的最大宽度:
观察行为:
期望的行为
HTML / CSS(JSFIDDLE: http://jsfiddle.net/WmcjM/):
<style> .container { position: relative; width: 300px; background: #ccc; height: 100px; } .text { position: absolute; max-width: 150px; left: 290px; top: 10px; background: lightblue; } </style> <div class="container"> <div class="text">Lorem ipsum dolor sit amet</div> </div>
注意:一些夫妇的变化似乎达到了所期望的行为,但这些变化并不完全相同,包括:
>定义min-width:150px on .text(文本可能只是一个字,我不想让容器过大)
>定位.text.相对于文档,而不是.container(它需要出现在容器旁边,即使浏览器被调整大小)
解决方法
尝试使用position:relative; on .text
编辑:还可以将其放在绝对定位的包装器中,并具有自定义的最大宽度
CSS
.container { position: relative; width: 300px; background: #ccc; height: 300px; } .wrap_text { position: absolute; max-width: 200px; top: 10px; } .text { position: relative; left: 290px; background: lightblue; }
和HTML:
<div class="container"> <div class="wrap_text"> <div class="text"> Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> </div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。