Text 文字溢出提示

BzText 是一个智能的文字展示组件：文字不满时正常显示，超出容器宽度时自动显示省略号并通过 tooltip 查看完整内容。支持单行和多行省略。

基础用法

文字超出容器宽度时自动省略，hover 显示完整内容。

基础用法

Vue Demo

这是一段很长的文本内容超出容器宽度时显示省略号并可通过tooltip查看完整内容

可直接复制并在项目中使用

<template>
  <div style="width: 200px">
    <BzText model-value="这是一段很长的文本内容超出容器宽度时显示省略号并可通过tooltip查看完整内容" />
  </div>
</template>

多行省略

通过 tool-tip-line 设置显示行数，超出部分省略。

多行省略

Vue Demo

这是一段很长的文本内容这是一段很长的文本内容这是一段很长的文本内容这是一段很长的文本内容

可直接复制并在项目中使用

<template>
  <div style="width: 200px">
    <BzText
      model-value="这是一段很长的文本内容这是一段很长的文本内容这是一段很长的文本内容这是一段很长的文本内容"
      :tool-tip-line="2"
    />
  </div>
</template>

自定义 Tooltip 大小

通过 tool-tip-max-width 和 tool-tip-max-height 控制 tooltip 弹窗的尺寸。

自定义 Tooltip 大小

Vue Demo

超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本

可直接复制并在项目中使用

<template>
  <div style="width: 200px">
    <BzText
      model-value="超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本"
      :tool-tip-max-width="300"
      :tool-tip-max-height="200"
    />
  </div>
</template>

禁用 Tooltip

设置 :tool-tip="false" 关闭 tooltip，文字超出后仅显示省略号。

禁用 Tooltip

Vue Demo

正常显示的文字，超出部分仅显示省略号无tooltip

可直接复制并在项目中使用

<template>
  <div style="width: 300px">
    <BzText model-value="正常显示的文字，超出部分仅显示省略号无tooltip" :tool-tip="false" />
  </div>
</template>

自定义行高

自定义行高

Vue Demo

设置行高后多行省略的效果设置行高后多行省略的效果设置行高后多行省略的效果

可直接复制并在项目中使用

<template>
  <div style="width: 200px">
    <BzText
      model-value="设置行高后多行省略的效果设置行高后多行省略的效果设置行高后多行省略的效果"
      :tool-tip-line="3"
      :line-height="28"
    />
  </div>
</template>

插槽用法

当需要自定义文字样式（如加粗、颜色）时，可使用默认插槽。model-value 仍作为 tooltip 的显示内容。

默认插槽

Vue Demo

自定义渲染的加粗文本内容超出时显示省略号

可直接复制并在项目中使用

<template>
  <div style="width: 200px">
    <BzText model-value="完整文本用于tooltip显示" :tool-tip-line="2">
      <b>自定义渲染的加粗文本内容超出时显示省略号</b>
    </BzText>
  </div>
</template>

Props

参数	说明	类型	默认值
modelValue	展示文字	string	''
toolTip	是否开启 tooltip，内容不满时自动隐藏	boolean	true
toolTipLine	展示几行省略	number	1
toolTipMaxWidth	tooltip 的最大宽度	100 | 200 | 300 | 400 | 500 | 600 | 700 | 800	600
toolTipMaxHeight	tooltip 的最大高度	100 | 200 | 300 | 400 | 500 | 600 | 700 | 800	300
lineHeight	文字行高	number	20

Slots

插槽名	说明
default	自定义文字内容，优先于 modelValue