TextOverflow 文本溢出

可以通过设置文本长度或者组件width使文本出现溢出效果。

固定宽度

测试长度问题测试长度问题测试长度问题测试长度问题测试长度问题

测试长度

基于宽度计算时需要设置width，否则不会有溢出效果

<template>
  <epp-text-overflow style="display: inline-block; max-width: 100px">
    测试长度问题测试长度问题测试长度问题测试长度问题测试长度问题
  </epp-text-overflow>
  <br /><br />
  <epp-text-overflow style="display: inline-block; max-width: 100px"> 测试长度 </epp-text-overflow>
</template>
<script lang="ts" setup>
</script>

固定字符串长度

测试长度问题测试长度问题测试长度问题测试长度问题测试长度问题

基于长度计算时需要设置length，否则不会有溢出效果

<template>
  <epp-text-overflow method="length" :length="10" effect="dark">
    测试长度问题测试长度问题测试长度问题测试长度问题测试长度问题
  </epp-text-overflow>
</template>
<script lang="ts" setup>
</script>

自动字符串宽度

将会采用em单位计算字体宽度

测试12121212121长度问题测试长度问题测试长度问题测试长度问题测试长度问题

基于字体大小计算时需要设置length并且值大于0，否则不会有溢出效果

<template>
  <epp-text-overflow method="autoWidth" :length="10" effect="dark">
    测试12121212121长度问题测试长度问题测试长度问题测试长度问题测试长度问题
  </epp-text-overflow>
</template>
<script lang="ts" setup>
</script>

Attributes

参数	说明	类型	可选值	默认值
effect	tooltip样式主题	string	参考Element Plus Popover文档	light
placement	tooltip弹出位置	string	参考Element Plus Popover文档	top
method	溢出方法：宽度自动计算或者计算字符串长度	string	width / length / autoWidth	width
length	基于长度计算时，需要设置此值	number	—	-1
width	弹框宽度	number / string	—	-

Slots

名称	说明
—	文本内容