保持正常的字包装在绝对定位的容器内 [英] Preserve normal word wrapping inside absolutely positioned container

问题描述

我在一个相对定位的容器中有一个绝对定位的文本块。绝对定位的元素超出其容器的右边界。

问题是：文本不像正常的包装;它会过早崩溃，而不是扩展到定义的 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> 
  

注意：一些变化似乎实现了所需的行为， 'm寻找，包括：

• 定义 min-width：150px code> .text （文本可能只是一个字，我不想让容器过大）


• 定位 .text 。相对于文档，而不是 .container （它需要出现在容器旁边，即使调整浏览器大小）

解决方案

尝试使用 position：relative; .text

EDIT：也可以使用自定义的最大宽度

$ b 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> 
  

I have an absolutely positioned block of text inside a relatively positioned container. The absolutely positioned element exceeds the right boundary of its container.

The problem is: the text isn't wrapping as normal; it's breaking prematurely rather than expanding to its defined max-width:

Observed behavior:

Desired behavior

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>

Note: A couple changes that appear to achieve the desired behavior, but which aren't quite what I'm looking for, include:

• defining min-width: 150px on .text (the text might just be one word, and I don't want the container to be oversized)
• positioning .text. relative to document, rather than to .container (it needs to appear beside the container, even when the browser is resized)

解决方案

Try using position: relative; on .text

EDIT: Also put it inside an absolute positioned wrapper with your custom max-width

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;
}

And 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>

这篇关于保持正常的字包装在绝对定位的容器内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！