html - 显示为内联的 block 元素(绝对定位，左侧)

Question

我有一个容器和一个内部 block 级元素(fiddler):

HTML

<div id="container">
    <span>Something is written here</span>
</div>

CSS

#container {
    position:relative;
    width:300px;
    height:20px;
    background:blue;
}

#container span {
    display:block;
    position:absolute;
    left:250px;
    background:green;
    color:white;
}

为什么 #container span 单词是按行分割的，而不是一行？请注意，如果我将位置从 left 更改为 negative right - right:-20px; - 消息将不再拆分。为什么？我不能使用 right，因为无论长度如何，我的消息都应该从容器 block 右侧的同一点开始。如果我指定 width，消息也不会被拆分，但我也不能这样做，因为我事先不知道消息的长度

Answer 1

为了避免换行，使用

white-space: nowrap;

来自 MDN article :

nowrap
Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

---

问题是如果你设置一个太大的 left 值，你会把元素从左边推到右边，它的右边会试图留在 #container，所以有换行。

如果您使用 right: -20px 则没有换行，因为您是将元素从右侧拉到右侧，因此没有必要尝试让右侧保留在里面。

以上只是行为背后的想法，具体定义在this section of the spec中:

'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'

包裹的原因是“收缩以适合”。