el-button displays part of the text content

el-button displays partial content and ellipsis handles overflow text

If you want to display part of the text content in the el-button component, you can use CSS text overflow processing to achieve. The following is a common practice:

1. Set the width of the parent container to limit the width of the text displayed.
2. Use the text-overflow property of CSS to control the overflow processing of text. The common values ​​are ellipsis (ellipsis) and clip (cropping).
3. Add white-space: nowrap attribute to prevent text from wrapping.
   Sample code:

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

two buttons on the same row

If you want to place two buttons on the same line, you can use the CSS display property to do so. The following is a common practice:

1. Use the display: flex property to set the button container to a flex layout.
2. Use the flex-direction: row property to set the main axis direction of the button container to be horizontal.
3. Use the justify-content: space-between property to evenly space the buttons within the button container horizontally.
   Sample code:

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