1.左侧固定,右侧自适应
// html
<div class="container">
<div class="left" >llllllllllllllllllllllllllllllllllllllllllllllllllllllllll</div>
<div class="right">rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</div>
</div>
//css
.left{
margin-right: 20px;
float: left;
}
.right{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
效果图:
2. 左侧固定,右侧自适应(中和右为整体)
// html
<div class="container">
<div class="left" >llllllllllllllllllllllllllllllllllllllllllllllllllllllllll</div>
<div class="right" >
<div class="right1" >111111111111111111111111111111111111111111111111111111111111111111111111111</div>
<div class="right2">2222222222222222222222222222222222222222222222</div>
</div>
</div>
//css
.left{
margin-right: 20px;
float: left;
}
.right{
display: flex;
}
.right1{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 20px;
}
.right2{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
效果图:
3.左右两侧固定,中间自适应
// html
<div class="container">
<div class="right">rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</div>
<div class="left">llllllllllllllllllllllllllllllllllllllllllllllllllllllllll</div>
<div class="center">cccccccccccccccccccccccccccccccccccccccccccccccccccccccc</div>
</div>
//css
.left{
float: left;
}
.right{
float: right;
margin-left: 20px;
}
.center{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
效果图: