一行两个文本溢出，宽度自动伸缩（flex和文本溢出的应用）
项目里面有这样一个需求：
在同一行有两段文字，效果用文字来描述太长了，我就直接上图了，就是下图的效果
实现上述效果代码：
<!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的话就不能实现溢出部分用省略号代替
