根据其中一个对象的内容控制容器宽度

Question

我认为侥幸，这适用于Chrome。如何在所有浏览器中获得Chrome外观？理想情况下，容器宽度由中文文本和可能的拼音设置，但rubydef包裹。 JSFiddle：http://jsfiddle.net/tofutim/a10xm9s5/

<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>

Answer 1

我认为您遗失的唯一内容是white-space: nowrap;中的text。

Fiddle