ContentText 内容文本

用于展示纯文本内容，支持行数截断、展开折叠、复制等交互。

基础用法

纯文本内容展示，支持行数截断

普通文本

这是一段普通的纯文本内容，无需任何特殊处理。

行数截断（line=2）

这是一段较长的文本内容，用于演示行数截断功能。 通过设置 line 属性，可以限制显示的行数。 当文本超过指定的行数时，超出部分会被隐藏，并显示「展开」按钮供用户点击查看完整内容。 第五行内容，用于验证多行场景下的截断效果。每一行的长度可能会不同，因此需要确保布局能够正确处理各种情况。这是一段较长的文本内容，用于演示行数截断功能。 通过设置 line 属性，可以限制显示的行数。 当文本超过指定的行数时，超出部分会被隐藏，并显示「展开」按钮供用户点击查看完整内容。 第五行内容，用于验证多行场景下的截断效果。每一行的长度可能会不同，因此需要确保布局能够正确处理各种情况。这是一段较长的文本内容，用于演示行数截断功能。 通过设置 line 属性，可以限制显示的行数。 当文本超过指定的行数时，超出部分会被隐藏，并显示「展开」按钮供用户点击查看完整内容。 第五行内容，用于验证多行场景下的截断效果。每一行的长度可能会不同，因此需要确保布局能够正确处理各种情况。

行数截断（line=3）

这是一段较长的文本内容，用于演示行数截断功能。 通过设置 line 属性，可以限制显示的行数。 当文本超过指定的行数时，超出部分会被隐藏，并显示「展开」按钮供用户点击查看完整内容。 第五行内容，用于验证多行场景下的截断效果。每一行的长度可能会不同，因此需要确保布局能够正确处理各种情况。这是一段较长的文本内容，用于演示行数截断功能。 通过设置 line 属性，可以限制显示的行数。 当文本超过指定的行数时，超出部分会被隐藏，并显示「展开」按钮供用户点击查看完整内容。 第五行内容，用于验证多行场景下的截断效果。每一行的长度可能会不同，因此需要确保布局能够正确处理各种情况。这是一段较长的文本内容，用于演示行数截断功能。 通过设置 line 属性，可以限制显示的行数。 当文本超过指定的行数时，超出部分会被隐藏，并显示「展开」按钮供用户点击查看完整内容。 第五行内容，用于验证多行场景下的截断效果。每一行的长度可能会不同，因此需要确保布局能够正确处理各种情况。

自定义最大高度

这是一段较长的文本内容，用于演示行数截断功能。 通过设置 line 属性，可以限制显示的行数。 当文本超过指定的行数时，超出部分会被隐藏，并显示「展开」按钮供用户点击查看完整内容。 第五行内容，用于验证多行场景下的截断效果。每一行的长度可能会不同，因此需要确保布局能够正确处理各种情况。这是一段较长的文本内容，用于演示行数截断功能。 通过设置 line 属性，可以限制显示的行数。 当文本超过指定的行数时，超出部分会被隐藏，并显示「展开」按钮供用户点击查看完整内容。 第五行内容，用于验证多行场景下的截断效果。每一行的长度可能会不同，因此需要确保布局能够正确处理各种情况。这是一段较长的文本内容，用于演示行数截断功能。 通过设置 line 属性，可以限制显示的行数。 当文本超过指定的行数时，超出部分会被隐藏，并显示「展开」按钮供用户点击查看完整内容。 第五行内容，用于验证多行场景下的截断效果。每一行的长度可能会不同，因此需要确保布局能够正确处理各种情况。

<template>
  <div class="demo-section">
    <p class="demo-title">普通文本</p>
    <HxContentText :content="plainText" />

    <p class="demo-title" style="margin-top: 28px">行数截断（line=2）</p>
    <HxContentText :content="longText" :line="2" />

    <p class="demo-title" style="margin-top: 28px">行数截断（line=3）</p>
    <HxContentText :content="longText" :line="3" />

    <p class="demo-title" style="margin-top: 28px">自定义最大高度</p>
    <HxContentText :content="longText" :max-height="120" />
  </div>
</template>

<script setup lang="ts">
import { HxContentText } from '@whhx/ui'

const plainText = '这是一段普通的纯文本内容，无需任何特殊处理。'

const longText = `这是一段较长的文本内容，用于演示行数截断功能。
通过设置 line 属性，可以限制显示的行数。
当文本超过指定的行数时，超出部分会被隐藏，并显示「展开」按钮供用户点击查看完整内容。
第五行内容，用于验证多行场景下的截断效果。每一行的长度可能会不同，因此需要确保布局能够正确处理各种情况。这是一段较长的文本内容，用于演示行数截断功能。
通过设置 line 属性，可以限制显示的行数。
当文本超过指定的行数时，超出部分会被隐藏，并显示「展开」按钮供用户点击查看完整内容。
第五行内容，用于验证多行场景下的截断效果。每一行的长度可能会不同，因此需要确保布局能够正确处理各种情况。这是一段较长的文本内容，用于演示行数截断功能。
通过设置 line 属性，可以限制显示的行数。
当文本超过指定的行数时，超出部分会被隐藏，并显示「展开」按钮供用户点击查看完整内容。
第五行内容，用于验证多行场景下的截断效果。每一行的长度可能会不同，因此需要确保布局能够正确处理各种情况。`
</script>

<style scoped>
.demo-section {
  padding: 4px 0;
}
.demo-title {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  font-weight: 500;
}
</style>

复制功能

通过 `copyable` 开启复制功能

普通文本 + 复制（hover 查看）

可通过 Ctrl+C 或点击复制按钮复制本段内容。

空内容占位

暂无数据

<template>
  <div class="demo-section">
    <p class="demo-title">普通文本 + 复制（hover 查看）</p>
    <HxContentText :content="plainText" :copyable="true" />

    <p class="demo-title" style="margin-top: 28px">空内容占位</p>
    <HxContentText :content="emptyText" :copyable="true" placeholder="暂无数据" />
  </div>
</template>

<script setup lang="ts">
import { HxContentText } from '@whhx/ui'

const plainText = '可通过 Ctrl+C 或点击复制按钮复制本段内容。'

const emptyText = ''
</script>

<style scoped>
.demo-section {
  padding: 4px 0;
}
.demo-title {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  font-weight: 500;
}
</style>

API

Props

参数	说明	类型	默认值
content	显示的文本内容	string	—
line	行数限制，超出后显示「展开」按钮，0 表示不限制	number	0
copyable	是否支持复制，hover 后显示复制按钮	boolean	true
placeholder	内容为空时的占位文本	string	''
maxHeight	最大高度（px 或带单位字符串），超出后截断	number | string	0

功能说明

• 行数截断：通过 line 属性限制显示行数，超出后显示「展开」按钮
• 最大高度：通过 maxHeight 属性限制容器高度，超出部分隐藏
• 复制：鼠标 hover 后显示复制按钮，点击将文本内容写入剪贴板

类型定义

import type { ContentTextProps } from '@whhx/ui'
// ContentTextProps:
// content?: string
// line?: number
// copyable?: boolean
// placeholder?: string
// maxHeight?: number | string