Question

我有一个容器和一个内部块级元素（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更改为负右 - right:-20px;，则不再分割消息。为什么？我无法正确使用，因为我的消息无论长度如何都应该从容器块右侧的同一点开始。如果我指定width，该邮件也会被拆分，但由于我事先并不知道邮件的长度，所以我也无法进行拆分

Answer 1

为避免包装，请使用

white-space: nowrap;

来自MDN article：

<强> NOWRAP
像正常一样折叠空格，但是抑制文本中的换行符（文本换行）。

问题在于，如果设置的left值过大，则会将元素从左侧推向右侧，而右侧将尝试保留在#container内，因此＆＃ 39;包装。

如果你使用right: -20px没有包装，因为你正在从右边向右拉元素，所以没有必要试图让右边留在里面。< / p>

以上只是行为背后的理念，具体在this section of the spec中定义：

＆＃39;宽度＆＃39;并且＆＃39;对＆＃39;是＆＃39; auto＆＃39;并且＆＃39;离开＆＃39;不是自动＆＃39;然后宽度缩小到适合。然后解决＆＃39;右＆＃39;

包装的原因是＆＃34;收缩到适合＆＃34;。

Answer 2

如果你想知道为什么会这样，因为如果你在300px容器中移动那个块超过250px，那么它只会是50px宽。当到达50px块的末尾时，单词将会中断。

如果你把它移到右边-20px你将有320px的信息来填充，在这种情况下它不会包裹。

块元素显示为内联（绝对位置，左侧）

2 个答案: