html – 将绝对定位的容器内的普通字包装保留

前端之家收集整理的这篇文章主要介绍了html – 将绝对定位的容器内的普通字包装保留前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在一个相对定位的容器中有一个绝对定位的文本块.绝对定位的元件超过其容器的右边界.

问题是:文本没有正常包装;它过早破坏而不是扩展到其定义的最大宽度:

观察行为:

期望的行为

HTML / CSS(JSFIDDLE: http://jsfiddle.net/WmcjM/):

  1. <style>
  2. .container {
  3. position: relative;
  4. width: 300px;
  5. background: #ccc;
  6. height: 100px;
  7. }
  8.  
  9. .text {
  10. position: absolute;
  11. max-width: 150px;
  12. left: 290px;
  13. top: 10px;
  14. background: lightblue;
  15. }
  16. </style>
  17.  
  18. <div class="container">
  19. <div class="text">Lorem ipsum dolor sit amet</div>
  20. </div>

注意:一些夫妇的变化似乎达到了所期望的行为,但这些变化并不完全相同,包括

>定义min-width:150px on .text(文本可能只是一个字,我不想让容器过大)
>定位.text.相对于文档,而不是.container(它需要出现在容器旁边,即使浏览器被调整大小)

解决方法

尝试使用position:relative; on .text

编辑:还可以将其放在绝对定位的包装器中,并具有自定义的最大宽度

CSS

  1. .container {
  2. position: relative;
  3. width: 300px;
  4. background: #ccc;
  5. height: 300px;
  6. }
  7.  
  8. .wrap_text {
  9. position: absolute;
  10. max-width: 200px;
  11. top: 10px;
  12. }
  13.  
  14. .text {
  15. position: relative;
  16. left: 290px;
  17. background: lightblue;
  18. }

和HTML:

  1. <div class="container">
  2. <div class="wrap_text">
  3. <div class="text">
  4. Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  5. </div>
  6. </div>
  7. </div>

猜你在找的HTML相关文章