Components

Text

The <Text> component renders text content. It supports rich styling, paragraph layout, and inline segments using <Tspan>.

Props

Prop	Type	Default	Description
`style`	`Style`	—	Standard style object. Supports all typography and layout properties.
`fixed`	`boolean`	—	When true, the element is fixed and repeated on every page.
`render`	`(props: { pageNumber: number, subPageNumber: number }) => string`	—	Render prop for conditional text per-page.
`debug`	`boolean`	—	Show debug borders for this element.
`hyphens`	`boolean`	`true`	Enable/disable hyphenation for this text block.
`minPresenceAhead`	`number`	`0`	Prevents page breaks when fewer than N points remain.
`wrap`	`boolean`	`true`	Whether text can wrap.
`maxLines`	`number`	—	Maximum number of lines to render. Extra text is truncated.

Usage

vue

<template>
  <Document>
    <Page size="A4">
      <Text :style="{
        fontSize: 24,
        fontWeight: 'bold',
        fontFamily: 'Helvetica',
        marginBottom: 12,
      }">
        Heading Text
      </Text>

      <Text :style="{
        fontSize: 12,
        lineHeight: 1.6,
        textAlign: 'justify',
      }">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </Text>
    </Page>
  </Document>
</template>

Text Truncation

Use maxLines to limit text and add an ellipsis:

vue

<template>
  <Document>
    <Page size="A4">
      <Text :style="{ fontSize: 12 }" :maxLines="2">
        This text will be truncated at two lines if it exceeds
        the available width. Any content beyond two lines will
        be hidden and replaced with an ellipsis character.
      </Text>
    </Page>
  </Document>
</template>

Inline Styling with Tspan

Use <Tspan> for styled inline text segments:

vue

<template>
  <Document>
    <Page size="A4">
      <Text :style="{ fontSize: 14 }">
        This is normal text,
        <Tspan :style="{ fontWeight: 'bold', color: '#dc2626' }">
          bold red text,
        </Tspan>
        and
        <Tspan :style="{ fontStyle: 'italic', textDecoration: 'underline' }">
          italic underlined text.
        </Tspan>
      </Text>
    </Page>
  </Document>
</template>

Text Decoration

Prop	Type	Default	Description
`textDecoration`	`'underline' \| 'line-through' \| 'underline line-through'`	—	Add lines to text.
`textDecorationColor`	`string`	—	Color of decoration lines.
`textDecorationStyle`	`'solid' \| 'dashed' \| 'dotted' \| 'wavy'`	`'solid'`	Style of decoration lines.

vue

<template>
  <Document>
    <Page size="A4">
      <Text :style="{
        fontSize: 14,
        textDecoration: 'underline',
        textDecorationColor: '#dc2626',
        textDecorationStyle: 'wavy',
      }">
        This text has a red wavy underline.
      </Text>
    </Page>
  </Document>
</template>

Advanced Typography

vue-pdf includes a sophisticated text layout engine (@vuepdf/textkit) that handles:

Line breaking (Knuth-Plass, best-fit)
Hyphenation (with configurable callbacks)
Text justification and alignment
Right-to-left (RTL) and bidirectional text
Script itemization (Latin, Arabic, CJK, etc.)
Orphans and widows control

vue

<template>
  <Document>
    <Page size="A4">
      <Text :style="{
        fontSize: 12,
        textAlign: 'justify',
        hyphens: 'auto',
        orphans: 3,
        widows: 2,
      }">
        This paragraph uses advanced text layout features. Hyphenation
        is enabled, and orphans/widows control prevents single lines
        from appearing at page boundaries.
      </Text>
    </Page>
  </Document>
</template>

The text layout engine processes text paragraph-by-paragraph. Each <Text> component represents a single paragraph. Use multiple <Text> components for separate paragraphs.