原

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

129人阅读 2025/5/29 16:49 总访问：906826 评论：0 收藏：0 手机

分类: 前端

#### 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)

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

TeachingNote

这一生多幸运赶上过你.

博主信息

排名

文章

粉丝

文章类别

.net 40篇

后端 11篇

ORM 16篇

前端 115篇

随笔 21篇

移动开发 6篇

数据库 11篇

英语 3篇

rabbitmq 1篇

.net core 9篇

unity 1篇

k8s 1篇

云服务 1篇

DDD 1篇

网络 1篇

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

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}