要素が折り返しテキストに収縮しない

Question

ブロックサイズは必要以上に大きくならないようにしてください。

私はのように、使用word-break財産

.item { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.item-icon { 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 50%; 
 
    background-color: green; 
 
    margin-right: 20px; 
 
} 
 

 
.item-text { 
 
    outline: 1px solid green; 
 
    font-size: 20px; 
 
    max-width: 100px; 
 
}

<div class="item"> 
 
    <div class="item-icon"></div> 
 
    <div class="item-text">lorem a morem</div> 
 
</div>

Answer 1

...赤い線の右側にスペースを避けるために必要があります。

.item-text { 
    word-break: break-all; 
} 

.item { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.item-icon { 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 50%; 
 
    background-color: green; 
 
    margin-right: 20px; 
 
} 
 

 
.item-text { 
 
    outline: 1px solid green; 
 
    font-size: 20px; 
 
    max-width: 100px; 
 
    word-break: break-all; 
 
}

<div class="item"> 
 
    <div class="item-icon"></div> 
 
    <div class="item-text">lorem a morem</div> 
 
</div>

・ホープ、このことができます：以下のスニペットでK！

Answer 2

あなたが抱えている問題は、テキストを折り返すときのCSSの働きです。

ブレークを発生させる場所に<br>タグを追加することで、問題を回避できます。

このような何か：

.item { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.item-icon { 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 50%; 
 
    background-color: green; 
 
    margin-right: 20px; 
 
} 
 

 
.item-text { 
 
    outline: 1px solid green; 
 
    font-size: 20px; 
 
    max-width: 100px; 
 
}

<div class="item"> 
 
    <div class="item-icon"></div> 
 
    <div class="item-text">lorem a<br>morem</div> 
 
</div>

ここでは詳細な説明です：Make container shrink-to-fit child elements as they wrap