Bug Type: Component

Environment

• Vue Version: 3.2.13
• Element Plus Version: 2.7.3
• Browser / OS: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 Edg/126.0.0.0
• Build Tool: Vue CLI

Reproduction

Related Component

• el-link
• el-text

Reproduction Link

Element Plus Playground

Steps to reproduce

src/components/TestLinkAndTextComponent.vue

<template>
  <div style="width: 300px;">
    <el-text class="w-150px mb-2" size="large" truncated>
      <!-- {{ props.title }} -->

      <el-link
        type="default"
        :href="props.href"
        target="_blank"
        class="news-title"
      >
      {{ props.title }}
      </el-link>
    </el-text>
  </div>
</template>

<script lang="js" setup>
const props = defineProps({
title: {
type: String,
default: "标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题题标题标题标题标题标题标题标题标题",
},
href: {
type: String,
default: "https://www.baidu.com",
},
});
</script>

<style lang="scss" scoped></style>

src/App.vue

<template>
  <div id="app">
    <TestLinkAndTextComponent></TestLinkAndTextComponent>
  </div>
</template>

<script>
import TestLinkAndTextComponent from './components/TestLinkAndTextComponent.vue';

export default {
name: "App",
components: {
TestLinkAndTextComponent
},
setup() {
return {

};
},
};
</script>

<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

What is Expected?

1. 显示省略号 2. 有下划线且高亮文本
   可以同时显示两个功能

What is actually happening?

1. 显示省略号 2. 有下划线且高亮文本
   只能成功显示其中一个功能

Additional comments

(empty)