備忘録的に。
よくある左右2カラムレイアウトで、片方のメインコンテンツなどが可変幅でwidthが設定されていない場合、その子要素にcssで text-overflow: Ellipsis; を指定しても、はみ出してしまって適用できない場合がある。その対処法。親要素にwidthは指定されていない、したくないときに有効である。
style.css
.container{display:flex;height:100vh;/*便宜上設定*/width:1000px;margin:0auto;}.left{width:100%;background-color:yellow;flex:11auto;}.right{flex:00300px;background-color:blue;color:white;min-width:0;}.header{background:red;color:white;display:table;table-layout:fixed;width:100%;}.header.content{white-space:nowrap;display:table-cell;text-overflow:Ellipsis;overflow:hidden;}.header.buttons{background:green;display:table-cell;width:200px;}@mediascreenand(max-width:1000px){/*伸縮に対応可能かどうか確認のため*/.container{width:100%;}}index.html
<divclass="container"><divclass="left">コンテンツ-左 （内容幅-可変）
<divclass="header"><divclass="buttons">ボタンなど</div><divclass="content">省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト
</div></div></div><divclass="right">コンテンツ-右 （内容幅-固定(仮で300pxにしている。％指定でもOK)）
</div></div>ただ、これでいう「ボタンなど」にwidthが設定する必要があるのが、完璧ではないところ。できるならここも内容に応じて可変させたい。