經常可能要做到這種展示效果，用來標注個中標簽介紹啥的
但是 會出現某一行，文本過長的話 就是這樣的效果 看起來很難受
因為使用的彈性布局 隨便左側我們固定的高度，但是還是會往左邊進行擠壓導致很難受
這個時候 我們需要給右側的元素加上一個，flex: 1. 讓他自適應 就可以了
.desc {
flex: 1;
}
其實文本兩側對齊通過一個c s s屬性即可實作，text-align-last: justify;
但是吧，這個屬性 ios 又不支持，這個就又不舒服了
我們也只能通過 空格 或者 彈性布局進行設定了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.text-item {
display: flex;
}
.label {
width: 80px;
margin:0 20px 10px 0;
display: inline-block;
text-align-last: justify;
display: flex; // 考慮 ios
justify-content: space-between;
}
.desc {
flex: 1;
}
</style>
</head>
<body>
<div class="text">
<div class="text-item">
<span class="label"> // 考慮 ios
<span>中</span>
<span>國</span>
</span>
<span class="desc">我是中國人</span>
</div>
<div class="text-item">
<span class="label">
<span>河</span>
<span>南</span>
</span>
<span class="desc">我來自河南省</span>
</div>
<div class="text-item">
<span class="label">
<span>洛</span>
<span>陽</span>
</span>
<span class="desc">洛陽市很有名，洛陽市很有名洛陽市很有名洛陽市很有名洛陽市很有名洛陽市很有名洛陽市很有名洛陽市很有名洛陽市很有名</span>
</div>
</div>
</body>
</html>
關注我，持續更新前端知識，
最近博主在參與那個博客之星的活動，看見的小伙伴 有空的話 麻煩動動小手 幫忙點個五星好評， 非常感謝
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/398707.html
標籤：其他