根據其中一個對象的內容來控制容器寬度

我認爲這是一種僥倖，它適用於Chrome。如何在所有瀏覽器中使用Chrome瀏覽器？理想情況下，容器寬度由中文文本和可能的拼音設置，但rubydef包裹。的jsfiddle：http://jsfiddle.net/tofutim/a10xm9s5/根據其中一個對象的內容來控制容器寬度

enter image description here

<style> 
#container { 
    border: 1px solid #f00; 
    margin: 0px; 
    display:inline-block; 
    display: table; 
} 
.text { 
    margin: 0px; 
    display: table-row; 
    width:auto; 
    font-size:36pt; 
    line-height:115%; 
    background: #ffcccc; 
} 
.pinyin { 
    margin: 0px; 
    display: table-cell; 
    width: 1px; 
    text-align: center; 
    background: #ccccff; 
} 
.rubydef { 
    margin: 0px; 
    display: table-cell; 
    width: 1px; 
    text-align: center; 
    font-style: italic; 
    background: #ccffcc; 
} 

</style> 
<p> 
<div id='container'> 
    <div class='pinyin'>tái bāo</div> 
    <div class='text'>臺胞</div> 
    <div class='rubydef'>tomato is a good fruit i wish i could eat it this week</div> 
</div>

來源

2015-06-18 tofutim

在我的歌劇中工作。由於某些原因無法使用firefox，但我會看看我能做些什麼。 – TricksfortheWeb

和資源管理器幾乎無法正常工作，因爲您的屏幕截圖顯示它只在資源管理器中看起來很奇怪。 – TricksfortheWeb

我想你唯一缺少的是white-space: nowrap;你text內。

Fiddle。

來源

2015-06-18 23:47:47

根據其中一個對象的內容來控制容器寬度

回答

相關問題