我有 2 個并排的 div，其中紅色的占據了剩余空間，
但是當內部元素太長時它會溢位，如下所示：
#wrapper{
width:50%;
display:flex;
height:10rem;
background-color:yellow;
}
#wrapper div{
height:5rem;
}
.second {
flex: 1;
}<div id="wrapper">
<div style="background: blue">short version</div>
<div class="second" style="background:red;">looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog version</div>
</div>我試過了，overflow-wrap: anywhere;但存在
uj5u.com熱心網友回復：
overflow-wrap: break-word; min-width:0;將作業。另一種方法是使用word-break: break-all：https : //codepen.io/SergeiMinaev/pen/MWEwvre。
我還在這個例子中添加了省略號。關于省略號的一件事：將添加“...”的行號必須是硬編碼的，因此您必須指定容器的固定高度。
UPD：添加了代碼：
#wrapper {
width:300px;
display:flex;
height:10rem;
background-color:yellow;
}
#wrapper div {
height:4rem;
/* correct line height is required */
line-height: 1rem;
}
.second {
flex: 1;
word-break: break-all;
display: -webkit-box;
/* maximum number of lines should be hardcoded, sadly */
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}<div id="wrapper">
<div style="background: blue">short version</div>
<div class="second" style="background:red;">
looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog version
</div>
</div>uj5u.com熱心網友回復：
您是否正在尋找價值破字的溢位包裝？
瀏覽器之間的兼容性很好，當然IE除外。
.example {
overflow-wrap: break-word;
}
編輯：Flexbox 需要最小寬度：0；溢位包裝作業（見這里）。
這是完整的作業代碼：
<html>
<head>
<style>
#wrapper{
width:50%;
display:flex;
height:10rem;
background-color:yellow;
}
#wrapper div{
height:5rem;
}
#wrapper div.second {
flex: 1;
overflow-wrap: break-word; /* breaks long words */
min-width: 0; /* necessary for flexbox */
}
</style>
</head>
<body>
<div id="wrapper">
<div style="background: blue">short version</div>
<div class="second" style="background:red;">looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog version</div>
</div>
</body>
</html>
uj5u.com熱心網友回復：
您可以使用溢位：隱藏；在 css 中像這樣：
#wrapper {
overflow: hidden;
}
這是完整的代碼：
#wrapper {
width: 50%;
display: flex;
height: 10rem;
background-color: yellow;
overflow: hidden;
}
#wrapper div {
height: 5rem;
}
.second {
flex: 1;
}<div id="wrapper">
<div style="background: blue">short version</div>
<div class="second" style="background:red;">looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog version</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/371865.html