文本

用于展示一行或多行文本内容的组件。

基础使用

通过标签 NueText 使用文本组件。

<template>
    <nue-text>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus
        quam dolore distinctio officia, dignissimos cumque ullam quod ipsum
        maxime, accusamus qui non itaque, debitis nulla odio asperiores ea
        labore dolorum!
    </nue-text>
</template>

标签变更

通过 tag 属性修改渲染时的 HTML 标签。默认为 span 标签。

<template>
    <nue-div class="vp-raw" align="end" gap="24px">
        <nue-text tag="h1">一级标题(h1)</nue-text>
        <nue-text tag="h2">二级标题(h2)</nue-text>
        <nue-text tag="h3">三级标题(h3)</nue-text>
        <nue-text tag="h4">四级标题(h4)</nue-text>
        <nue-text tag="p">段落(p)</nue-text>
        <nue-text tag="b">粗体(b)</nue-text>
        <nue-text>默认文本(span)</nue-text>
    </nue-div>
</template>

文本大小

通过 size 属性修改文本大小，支持 CSS font-size 属性值以及一些预设值，预设值包括 small、normal、large 以及 xlarge。

<template>
    <nue-div class="vp-raw" align="end" gap="24px">
        <nue-text size="32px">32px</nue-text>
        <nue-text size="xlarge">Xlarge</nue-text>
        <nue-text size="large">Large</nue-text>
        <nue-text size="normal">Normal</nue-text>
        <nue-text size="small">Small</nue-text>
    </nue-div>
</template>

文本颜色

通过 color 属性修改文本颜色，支持 CSS color 属性值。

<template>
    <nue-div align="center" gap="24px">
        <nue-text color="red">红色文本</nue-text>
        <nue-text color="#0F0">绿色文本</nue-text>
        <nue-text color="rgb(0,0,255)">蓝色文本</nue-text>
    </nue-div>
</template>

文本粗细

通过 weight 属性修改文本粗细，支持 CSS font-weight 属性值。

<template>
    <nue-div align="center" gap="24px">
        <nue-text weight="100">100</nue-text>
        <nue-text weight="300">300</nue-text>
        <nue-text weight="500">500</nue-text>
        <nue-text weight="700">700</nue-text>
        <nue-text weight="900">900</nue-text>
    </nue-div>
</template>

文本装饰

通过 decoration 属性修改文本装饰，支持 CSS text-decoration 属性值。

<template>
    <nue-div align="center" gap="24px">
        <nue-text decoration="underline">下划线</nue-text>
        <nue-text decoration="line-through">删除线</nue-text>
        <nue-text decoration="overline">上划线</nue-text>
    </nue-div>
</template>

文本对齐

通过 align 属性修改文本对齐方式，支持 CSS text-align 属性值。

<template>
    <nue-div align="stretch" vertical>
        <nue-text align="left">左对齐</nue-text>
        <nue-text align="center">居中</nue-text>
        <nue-text align="right">右对齐</nue-text>
    </nue-div>
</template>

文本溢出

通过 clamped 设置文本溢出时是否显示省略号，默认为 false。

<template>
    <nue-div>
        <nue-text :clamped="1">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque
            soluta voluptatum vel voluptatibus dignissimos recusandae, ducimus
            reiciendis qui consectetur iure? Unde numquam doloremque excepturi
            voluptates, aperiam error ipsam fuga minima?
        </nue-text>
        <nue-text :clamped="3">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque
            soluta voluptatum vel voluptatibus dignissimos recusandae, ducimus
            reiciendis qui consectetur iure? Unde numquam doloremque excepturi
            voluptates, aperiam error ipsam fuga minima?
        </nue-text>
    </nue-div>
</template>