el-button はテキストコンテンツの一部を表示します

el-button は部分的なコンテンツを表示し、省略記号はオーバーフロー テキストを処理します

el-buttonコンポーネントにテキストコンテンツの一部を表示したい場合は、CSSテキストオーバーフロー処理を使用して実現できます。以下は一般的な方法です。

1. 親コンテナの幅を設定して、表示されるテキストの幅を制限します。
2. テキストのオーバーフロー処理を制御するには、CSS の text-overflow プロパティを使用します。一般的な値は、省略記号 (省略記号) とクリップ (トリミング) です。
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>

同じ行に 2 つのボタン

2 つのボタンを同じ行に配置したい場合は、CSS 表示プロパティを使用して配置できます。以下は一般的な方法です。

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>