よくある左右2カラムレイアウトで、片方のメインコンテンツなどが可変幅でwidthが設定されていない場合、その子要素にcssで text-overflow: Ellipsis; を指定しても、はみ出してしまって適用できない場合がある。その対処法。
親要素にwidthは指定されていない、もしくはしたくないときに有効である。
style.css
.container {
display: flex;
height: 100vh;
/*便宜上設定*/
width: 1000px;
margin: 0 auto;
}
.left {
width: 100%;
background-color: yellow;
flex:1 1 auto;
}
.right {
flex: 0 0 300px;
background-color: blue;
color: white;
min-width: 0;
}
.ellipsis-content-wrap {
background: red;
color: white;
display: grid; /*これがポイント*/
}
.ellipsis-content {
white-space: nowrap;
text-overflow: Ellipsis;
overflow: hidden;
}
@media screen and (max-width: 1000px){
/*伸縮に対応可能かどうか確認のため*/
.container {
width: 100%;
}
}
index.html
<div class="container">
<div class="left">
コンテンツ-左 （内容幅-可変）
<div class="ellipsis-content-wrap">
<div class="ellipsis-content">
省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト
</div>
</div>
</div>
<div class="right">
コンテンツ-右 （内容幅-固定(仮で300pxにしている。％指定でもOK)）
</div>
</div>
↧