el-button展示部分文本内容

el-button展示部分内容且省略号处理溢出文本

如果你想在el-button组件中展示部分文本内容，你可以使用 CSS 的文本溢出处理来实现。以下是一种常见的做法：

1. 设置父容器的宽度来限制文本显示的宽度。
2. 使用 CSS 的 text-overflow 属性来控制文本的溢出处理方式，常见的取值有ellipsis（省略号）和clip（裁剪）。
3. 添加 white-space: nowrap 属性以防止文本换行。
   示例代码：

<template>
  <div class="button-container">
    <el-button class="truncate-button">这是一段很长很长的文本内容</el-button>
  </div>
</template>

<style>
.button-container {
      
      
  width: 100px;  /* 设置父容器宽度 */
}

.truncate-button {
      
      
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 使用省略号处理溢出文本 */
}
</style>

两个按钮放在同一行

如果你想将两个按钮放在同一行，你可以使用 CSS 的 display 属性来实现。以下是一种常见的做法：

1. 使用 display: flex 属性将按钮容器设置为弹性布局。
2. 使用 flex-direction: row 属性将按钮容器的主轴方向设置为水平方向。
3. 使用 justify-content: space-between 属性将按钮容器内的按钮在水平方向上均匀分布。
   示例代码：

<template>
  <div class="button-container">
    <el-button>按钮1</el-button>
    <el-button>按钮2</el-button>
  </div>
</template>

<style>
.button-container {
      
      
  display: flex; /* 设置为弹性布局 */
  flex-direction: row; /* 主轴方向为水平方向 */
  justify-content: space-between; /* 按钮在水平方向上均匀分布 */
}
</style>