CSS：基於按鈕設置彈出寬度寬，而不是消息寬度

Question

我有一個「彈出窗口」，看起來像這樣：

正如你所看到的，彈出窗口的寬度與文本的寬度延伸。

我想要得到的是文本的寬度，以包含兩個按鈕的容器的寬度爲界。

UPDATE：這裏就是我想：

的過長...文本仍然應該完全顯示，但隨後應繼續下一行。

這在理論上聽起來很容易，但我嘗試了很多不同的東西，但我一直無法解決這個問題（我正在尋找一個純粹的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的按鈕組的顯示中：彎曲設置大小。你也可以讓它與表一起工作。

然後用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; 
}