<div class="flexBox">
<div>radio</div>
<div class="flexBox grow">
<div class="flex33 flexBox">
<div class="label">sweet</div>
<div class="ellipsis">aaaaaaaaaa</div>
</div>
<div class="flex33 flexBox">
<div class="label">dark</div>
<div class="ellipsis">aaaaaaaaaa</div>
</div>
<div class="flex33 flexBox">
<div class="label">dark</div>
<div class="ellipsis">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>
</div>
</div>
<style>
.flexBox {
display: flex;
width: 100%;
}
.grow {
flex-grow: 1;
min-width: 0;
display: flex;
flex-wrap: wrap;
}
.flex33 {
flex: 0 0 33.333%;
min-width: 0;
display: flex;
align-items: flex-start; /* 変更 */
margin-bottom: 8px;
overflow: hidden;
}
.label {
margin-right: 24px;
border: 1px solid #333;
flex-shrink: 0;
}
.ellipsis-container {
flex-grow: 1;
min-width: 0;
max-height: 2.3em; /* line-heightの3倍 */
overflow: hidden;
}
.ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 3行で省略 */
line-height: 1.2em; /* line-heightの値を指定 */
white-space: normal;
word-break: break-word; /* 単語単位で改行 */
}
</style>
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme