TextOverflow

You can create text overflow effects by setting the text length or the component's width.

Fixed Width

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

测试长度

When calculating based on width, you need to set width; otherwise, there will be no overflow effect.

<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>

Fixed String Length

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

When calculating based on length, you need to set length; otherwise, there will be no overflow effect.

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

Automatic String Width

This will use em units to calculate the font width.

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

When calculating based on font size, you need to set length and the value must be greater than 0; otherwise, there will be no overflow effect.

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

Attributes

Parameter	Description	Type	Optional Values	Default Value
effect	Tooltip style theme	string	Refer to the Element Plus Popover documentation	light
placement	Tooltip pop-up position	string	Refer to the Element Plus Popover documentation	top
method	Overflow method: automatic width calculation or string length calculation	string	width / length / autoWidth	width
length	When calculating based on length, this value needs to be set	number	—	-1
width	Pop-up width	number / string	—	-

Slots

Name	Description
—	Text content