console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main{
margin: 100px;
}
.box{
border: 1px solid #000;
width: 400px;
display: flex;
justify-content: flex-start;
}
.left{
border: 1px solid #000;
width: 0;
flex:1;
}
.right{
border: 1px solid #000;
flex-shrink: 0;
width: 23px;
height: 23px;
background-color: #ccc;
border-radius: 100%;
color: #fff;
text-align: center;
}
.limit{
overflow:hidden;
text-overflow:ellipsis;
-webkit-box-orient:vertical;
-webkit-line-clamp:1;
white-space: nowrap;
word-break: break-all;
}
</style>
</head>
<body>
<div class="main">
<div class="box">
<div class="left">
<div class="limit">
字数比较多的时候就 就显示省略号 t123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789
</div>
</div>
<div class="right">
退
</div>
</div>
<div class="box">
<div class="left">
<div class="limit">
字数比较少的时候 右侧还在最右边 不合适
</div>
</div>
<div class="right">
退
</div>
</div>
</div>
<hr>
<div class="box">
<div class="">
<div class="limit">
字数比较少的时候 理想效果是右侧就紧贴着
</div>
</div>
<div class="right">
退
</div>
</div>
</body>
</html>