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/
<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
.
Comments
Post a Comment