在绝对定位的容器内保留正常的换行

Question

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

问题是：文本没有正常换行；它过早地破裂而不是扩展到其定义的

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

尝试在 .text 上使用

position: relative;

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

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

尝试使用以下方法之一：

方法一：

transform: translate(x, y);

代替

position: absolute; left: x; top: y;

方法 2：

width: max-content;

有关详细信息，请阅读this answer.

Answer 3

将绝对位置更改为相对位置，并将 .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 4

这是一个你可以使用的策略，当我上次测试它时，它应该在 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">P O G G E R S P O G G E R S P O G G E R S P O G G E R S P O G G E R S P O G G E R S P O G G E R S P O G G E R S P O G G E R S P O G G E R S P O G G E R 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>

Answer 5

使用

max-width

与

width: max-content

一起使用

white-space: pre-wrap

给了我想要的结果，而不需要使用相对定位或包装我的文本。

设置如下：

width: max-content;
max-width: 30ch;
white-space: pre-wrap