Vue3 span文字过多 展开收起组件

组件定义：

<!-- 展开收起 组件 -->
<script setup lang="ts">
import { getUuid } from '@/utils';

interface Props {
  /** 赋予input的id */
  id?: string | number;
  /** 字符串 */
  content?: string;
}

const props = withDefaults(defineProps<Props>(), {
  content: '',
});

const uId = getUuid();
</script>

<template>
  <input
    :id="`toggle-btn-${props.id || uId}`"
    class="toggle-input"
    type="checkbox"
  />
  <div class="load-more-item-value" :title="props.content ?? '--'">
    <label class="toggle-btn" :for="`toggle-btn-${props.id || uId}`"> </label>
    {{ props.content ?? '--' }}
  </div>
</template>

<style scoped lang="scss">
.load-more-item-value {
  line-height: 28px;
  font-size: 14px;
  word-break: break-all;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: justify;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;

  &::before {
    content: '';
    height: calc(100% - 28px);
    float: right;
  }

  &::after {
    content: '';
    width: 28px;
    height: 28px;
    position: absolute;
    background-color: #fff;
    transition: background-color 0.25s ease;
  }

  .toggle-btn {
    float: right;
    clear: both;
    font-size: 14px;
    color: var(--el-color-primary);
    font-weight: 400;
    cursor: pointer;

    &::before {
      content: '展开';
    }
  }
}

.toggle-input {
  display: none;
}

.toggle-input:checked + .load-more-item-value {
  -webkit-line-clamp: 999;
}
.toggle-input:checked + .load-more-item-value::after {
  visibility: hidden;
}
.toggle-input:checked + .load-more-item-value .toggle-btn::before {
  content: '收起';
}
</style>

组件包装

<script lang="ts">
import ToggleDisplay from './ToggleDisplay.vue';
import { defineComponent, h } from 'vue';

export default defineComponent({
  props: {
    addFlex: {
      type: Boolean,
      default: true,
    },
  },
  setup(props) {
    return {
      flex: props.addFlex,
    };
  },
  render() {
    return this.flex
      ? h(
          'div',
          {
            class: 'df',
          },
          h(ToggleDisplay, {
            ...this.$attrs,
          }),
        )
      : h(ToggleDisplay, {
          ...this.$attrs,
        });
  },
});
</script>

使用：

<ToggleDisplay
            :id="xxx"
            :key="xxx"
            :content="111111111111111111111111111111111111111111"
          />