如何调整内部元素的宽度，使其自然换行？

Question

在下面的示例中，我希望仅当 position-me 的左侧碰到屏幕左侧 like this 时才发生自动换行。

我认为目前 #position-me 继承父元素的宽度，即使我在 #position-me 中设置 width: auto !important; 它仍然以父元素的宽度换行。

如果我在 #position-me 上设置 white-space: nowrap;，那么它会覆盖 100px 宽度，但文本会超出 div（可能还有页面！）

#wrapper {
  position: absolute;
  bottom:0;
  right:0;
  width: auto;
  height: 100px;
  background-color: red;
}

#position-me {  
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-100%, -100%);
  width: auto;
  height: auto;
  background: green;
}

<div id='wrapper'>
This is the wrapper div
    <div id='position-me'>
        Text is here and it is great, I wonder when it will decide to wrap itself?
    </div>  
</div>

https://jsfiddle.net/pfa89bu1/2/

Answer 1

使用较大的负边距，将宽度限制为屏幕宽度减去红框宽度，并使用 bottom/right 作为位置：

#wrapper {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100px;
  background-color: red;
}

#position-me {
  position: absolute;
  bottom: 100%;
  right: 100%;
  margin-left: -200vmax;
  max-width: calc(100vw - 100%);
  background: green;
}

<div id='wrapper'>
  This is the wrapper div
  <div id='position-me'>
    Text is here and it is great, I wonder when it will decide to wrap itself?
  </div>
</div>

如何调整内部元素的宽度，使其自然换行？

How can I adjust the width of the inner element so that it word wraps naturally?

css

width

word-wrap