保留绝对定位的容器内正常的换行(Preserve normal word wrapping insi

我有文本的相对定位容器内的绝对定位块。绝对定位元件超过其容器的右边界。

问题是：文本不换为正常; 它打破过早，而不是扩大其定义的max-width ：

观察到的行为：

期望中的行为

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上.text （文字可能只是一个字，我不希望容器尺寸过大）
定位.text 。相对于记录，而不是.container （它需要出现在容器的旁边，即使当浏览器被调整大小）

Answer 1:

尝试使用position: relative; 上的.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>

Answer 2:

改变绝对位置相对，并在绝对定位的元素包裹的.text。

http://jsfiddle.net/WmcjM/4/

.container {
    position: relative;
    width: 300px;
    background: #ccc;
    height: 300px;
}

.text {
    position: relative;
    /*min-width: 200px;*/
    left: 290px;
    background: lightblue;
}

.wrap {
    position: absolute;
    max-width: 200px;
    top: 10px;
}

Answer 3:

这是一种策略，您可以使用应在Chrome，FF，Safari和IE11工作，当我上次测试它。

基本上，这个想法是欺骗浏览器认为你有宽度。以前的答案做工精细，但如果你退缩父容器的宽度，你会发现，你的内容开始，当它击中的是父容器的宽度来包装。这样的想法来解决这个问题是使用要锚你的内容到位于另一个容器中，然后相对于那个东西放置您的内容。

这里的区别是，我们将使用第一定位的容器来设置我们所期望的最大宽度。由于该容器具有高度为0，你甚至不会看到它。

的jsfiddle： http://jsfiddle.net/WmcjM/252/

HTML

<div class="container">
  <div class="sizing-container">
      <div class="your-text">You can put whatever you want here and you can see that the content wraps when you hit your max-width, but that max-width is actually defined as the width of the sizing container</div>
  </div>
</div>

CSS

.container {
    position: relative;
    background: #ccc;
    width: 70px;
    height: 70px;
    margin-bottom: 100px;
}

.your-text {
    position: absolute;
    left: 0;
    top: 100%;
    background: lightblue;
    word-break: break-word;
}

.sizing-container {
    position: absolute;
    display: block;
    height: 0px;
    background: red;
    width: 200px; // This is your max-width!
    top: 16px;
    left: 100%;
}

 .container { position: relative; background: #ccc; width: 70px; height: 70px; margin-bottom: 100px; } .monkaS { position: absolute; left: 0; top: 100%; background: lightblue; word-break: break-word; } .poggers { position: absolute; display: block; /* height: 1px; comment this in to see whats happening*/ height: 0px; background: red; width: 200px; top: 16px; left: 100%; }

 <div class="container"> <div class="poggers"> <div class="monkaS">Standard shit pogchamp chatlethal</div> </div> </div> <div class="container"> <div class="poggers"> <div class="monkaS">POGGERSPOGGERSPOGGERS POGGERSPOGGERSPOGGERS POGGERSPOGGERSPOGGERS POGGERSPOGGER S</div> </div> </div> <div class="container"> <div class="poggers"> <div class="monkaS">Short</div> </div> </div> <div class="container"> <div class="poggers"> <div class="monkaS">ReallyLongReallyLongReallyLongReallyLongReallyLongReallyLongReallyLongReallyLongReallyLongReallyLongReallyLong</div> </div> </div>