項目里面有這樣一個需求：
在同一行有兩段文字，效果用文字來描述太長了，我就直接上圖了，就是下圖的效果
實現上述效果代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .box{ border: 1px solid #CCCCCC; height: 25px; width: 200px; margin: 0px auto 50px; display: flex; display: -webkit-flex; flex-flow: row nowrap; -webkit-flex-flow: row nowrap; justify-content: flex-start; -webkit-justify-content: flex-start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .left{ background-color: coral; height: 100px; /* 放大：0 不能放大 因為當左右文字都很少時，文字從右往左排列，空出的空間放在行末。所以左邊不能放大，右邊必須放大 收縮：0 不能收縮 因為當左邊文字不超額但右邊文字超額時，要保持住左邊的寬度不收縮從而不出現省略號，所以左邊不能收縮 基值：auto 因為左邊的伸縮性都為0，所以基准值為auto，否則左邊自己就寬度為0了 */ flex: 0 0 auto; -webkit-flex: 0 0 auto; margin-right:10px; max-width: 130px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .right{ background-color: cornflowerblue; height: 100px; /* 此處為什么收縮性為1 因為如果為0的話右邊的文字就會溢出父元素，且沒有省略號 * */ flex: 1 1 auto; -webkit-flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } p{ text-align: center; } </style> </head> <body> <p>左右兩邊文字都很多時</p> <div class="box"> <span class="left"> 近視眼矯正中心(近視眼手術)近視眼矯正中心(近視眼手術)近視眼矯正中心(近視眼手術) </span> <span class="right"> 我的職稱很長 </span> </div> <p>左邊文字不超額，右邊文字很多</p> <div class="box"> <span class="left"> 科室科室 </span> <span class="right"> 我的職稱很長我的職稱很長我的職稱很長我的職稱很長 </span> </div> <p>左邊文字超額，右邊很少</p> <div class="box"> <span class="left"> 科室科室科室科室科室科室科室科室 </span> <span class="right"> 職稱 </span> </div> <p>左右兩邊文字都不超額</p> <div class="box"> <span class="left"> 近視眼矯 </span> <span class="right"> 職稱 </span> </div> </body> </html>
嘗試的其他方法：
代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } p{ width: 290px; border: 1px solid #ccc; margin: 50px auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 100%; } p > span:nth-of-type(1){ display: inline-block; margin-right: 10px; min-width: auto; max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: cadetblue; line-height: 150%; } </style> </head> <body> <p> <span>近視眼矯正中心(近視眼手術)</span> <span>職稱</span> </p> <p> <span>近視眼矯正中心(近視眼手術)</span> <span>我的職稱很長</span> </p> <p> <span>科室</span> <span>我的職稱很長</span> </p> </body> </html>
這種寫法，可以實現效果。左邊的span是inline-block右邊的inline這樣就無法對齊了。如果把右邊的span轉成inline-block的話就不能實現溢出部分用省略號代替