elementSelect セレクターの複数選択名が長すぎて展開すると高さが大きくなり、選択ボックスを超えてしまいます 複数ある場合は元の高さを拡張します 最適化方法

        elementuiの複数選択ドロップダウンボックスを固定長で使用する場合、長さを複数選択すると強制的に高さが拡張されてしまうのですが、折り返しや拡張をせず、余分な長さを表示して省略するようにするにはどうすればよいでしょうか?

        まず el-select にクラス名を付け、それを自由に付けて、selects を付けてから、次のスタイルを追加します。

        ::v-deep .selets {
          .tags-select-input {
            height: 40px;
            .el-select__tags {
              height: 40px;
              white-space: nowrap;
              overflow: hidden;
              flex-wrap: nowrap;
            }
          }

          .el-select__tags-text {
            display: inline-block;
            max-width: 85px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .el-tag__close.el-icon-close {
            top: -7px;
          }
        }

このうち、 word-break:keep-all; / 改行なし /
White-space:nowrap; / 改行なし /
overflow:hidden; / 内容が幅を超えた場合に余分な内容を非表示にする /
text-overflow:ellipsis; /テキストがマーカーを省略した場合に表示します...; overflow:hidden;/ と一緒に使用する必要があります

おすすめ

転載: blog.csdn.net/Alan_Walker1/article/details/129840321