vue3 标签超出部分隐藏 文案超出部分换行 并且显式....

<template>
  <div class="home" ref="homeRef">
    <span class="test">123456</span>
    <span class="test2">色测试测试出色</span>
  </div>
  <div>-------------</div>
  <div class="test-box">
    <span class="box-item" v-for="item in spanArr" :key="item">{{ item }}</span>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  getCurrentInstance,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
  onErrorCaptured,
  reactive,
  nextTick,
} from "vue";
let spanArr = ["测试", "测试测试", "aaa", "1", "啛啛喳喳"];
let homeRef: any = ref(null);

onMounted(() => {
  nextTick(() => {
    let spanArr: any = Array.from(homeRef.value.children);
    spanArr.forEach((element: any) => {
      if (element.scrollWidth > element.offsetWidth) {
        const br = document.createElement("br");
        insertAfter(br, element);
      }
    });
    function insertAfter(newEle: any, targetEle: any) {
      let parent = targetEle.parentNode;
      if (parent.lastChild == targetEle) {
        parent.appendChild(newEle);
      } else {
        parent.insertBefore(newEle, targetEle.nextSibling);
      }
    }
  });
});
</script>

<style lang="less">
// 文案超处部分 换行
.home {
  border: 1px solid red;

  .test {
    border: 1px solid green;
    width: 100px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
    text-overflow: ellipsis;
  }
  .test2 {
    border: 1px solid green;
    vertical-align: middle;
  }
}

// 标签超出部分隐藏
.test-box {
  display: flex;
  width: 130px;
  height: 20px;
  border: 1px solid red;
  flex-wrap: wrap;
  overflow: hidden;
  .box-item {
    width: auto;
    border: 1px solid rgb(0, 255, 110);
  }
}
</style>