原
flex布局,左侧文字,右边按钮,确保右侧的多按钮文字不换行,左侧如果文字超出就出现省略号。优先保证右边的文字不换行哇,确保右侧按钮始终在一行显示。按钮样式

view,html结构
<div class="lp-ca-item">
<div class="lp-ca-title">2、上传教学内容文档,AI智能提取知识大纲</div>
<div class="lp-ca-operate">
<div class="green-but">预览</div>
<div class="blue-but">数字人预览</div>
<div class="red-but">移除</div>
</div>
</div>
样式
.lp-ca-item {
display: flex;
align-items: center;
margin-top: 10px;
justify-content: space-between;
}
.lp-ca-title {
margin-right: 6px;
// 文字超出出现省略号
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lp-ca-operate {
display: flex;
flex-shrink: 0; /* 防止按钮组收缩 */
white-space: nowrap; /* 防止按钮换行 */
}
核心样式其实就是右边那块的这两句:
flex-shrink: 0; /* 防止按钮组收缩 */
white-space: nowrap; /* 防止按钮换行 */
按钮样式也贴一下吧
.green-but {
background: #e7f9fd;
border-radius: 4px 4px 4px 4px;
border: 1px solid #afe5f1;
padding: 4px 7px;
cursor: pointer;
margin-left: 5px;
margin-right: 5px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 12px;
color: #15c0e6;
}
.blue-but {
background: #ecf5ff;
border-radius: 4px 4px 4px 4px;
border: 1px solid #b3d8ff;
padding: 4px 7px;
cursor: pointer;
margin-left: 5px;
margin-right: 5px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 12px;
color: #409eff;
}
.red-but {
background: #ffecec;
border-radius: 4px 4px 4px 4px;
border: 1px solid #ebb4b4;
padding: 4px 7px;
cursor: pointer;
margin-left: 5px;
// margin-right: 5px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 12px;
color: #f56c6c;
}
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)
评价
排名
8
文章
252
粉丝
7
评论
7
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:
50010702506256


欢迎加群交流技术