html - Controlling container width based on content of one of the objects -


i think fluke, works on chrome. how can chrome across browsers? ideally container width set chinese text , possibly pinyin, rubydef wraps. 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 fruit wish eat week</div> </div> 

i think thing missing white-space: nowrap; within text.

fiddle.


Comments

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -