CSS：根据按钮宽度而不是消息宽度设置弹出宽度

Question

我有一个“弹出窗口”，如下所示：

如您所见，弹出窗口的宽度随文本宽度延伸。

我想要的是文本宽度受包含两个按钮的容器宽度的限制。

更新：这就是我想要的：

仍然应该完整显示loooong文本，但它应该在下一行继续。

这在理论上听起来很简单，但我尝试了很多不同的东西，而我却无法解决这个问题（我正在寻找纯CSS解决方案）。

此弹出窗口的结构：

<div class="popup">
    <div class="msg">Very looooooooooooooooooooooooooooooooooooooooooon text</div>
    <div class="buttons-container">
        <div class="button">Button number one</div>
        <div class="button">Button number two</div>
    </div>
</div>

基础css（弹出窗口需要绝对位置）：

.popup {
border: solid 1px red;
position: absolute;
}
.msg {
}
.buttons-container {
clear: both;
}
.button {
display: inline-block;
padding: 5px 10px;
background-color: darkGray;
}

• Here is a jsfiddle

Answer 1

这应该有效：

表，或显示：flex使用按钮继承大小。绝对位置设置文本标签的大小。

请参阅：http://jsfiddle.net/9QkEa/1/

<div id="container">
    <div id="label">
        <span>ssssss ssssssss ssssssss sssss</span>
    </div>
    <table>
    <tr>
        <td><button>leftttttttttttttttt</button></td><td><button>right</button></td>
    </tr>
    </table>
</div>

式：

#container {
    display: inline-block;
    overflow: hidden;
    border: 1px solid red;
}

#label {
    position: relative;
    width: 100%;
    height: 1.5em;
    overflow: hidden;
    white-space: nowrap;
}

#label span {
    position: absolute;
}

编辑：

http://jsfiddle.net/9QkEa/3/

这里的诀窍是在显示内部使用visibility：hidden按钮组：flex来设置大小。您也可以将它与表一起使用。

然后使用positive:relative，position:absolute和align-items:strech创建一个宽度正确但自动高度的容器。

然而，它正在使用溢出。所以最外面的容器需要允许溢出，并且可能很难定位。

这很糟糕，如果你有更好的选择（JavaScript，Wink Wink），请使用它。

<div id="container">
    <div id="label">
        <span>xssss as dasd asd as dasd asdas dsad asd asd adada sd asd</span>
        <div class="button-container">
            <button>leftttttttttttttttt</button><button>right</button>
        </div>
    </div>
    <div id="hidden" class="button-container">
        <button>leftttttttttttttttt</button><button>right</button>
    </div>
</div>

式

#container {
    position: relative;
    display: inline-flex;    
    flex-direction: column;
    align-items: stretch;
}

#label {
    position: absolute;
    background-color: grey;
    flex: 1 1 auto;
}

.button-container {
    padding: 5px;
    white-space: nowrap;
}

#hidden {
    visibility: hidden;
}