React PDF: Word Wrap Without Hyphens - A 2026 Guide

Rendering text in PDFs using React-PDF can often lead to unexpected formatting issues, such as unwanted hyphenation. This is particularly problematic when dealing with sensitive data like email addresses, where preserving the original structure is crucial. In this tutorial, you will learn how to implement word wrapping in React-PDF while removing hyphens, ensuring your content remains both readable and accurate.

Understanding how to control text flow in PDFs is essential for developers who want to maintain the integrity of their data presentation. This guide will walk you through the necessary steps to achieve this, complete with code examples and troubleshooting tips.

Prerequisites

• Basic knowledge of React and JavaScript.
• Node.js and npm installed on your machine.
• Familiarity with React-PDF library.
• React-PDF version 3.0.0 or later.

Step 1: Setting Up React-PDF

First, ensure you have React and React-PDF set up in your project. If not, you can create a new React app and install React-PDF via npm:

npx create-react-app react-pdf-word-wrap
cd react-pdf-word-wrap
npm install @react-pdf/renderer

Once installed, you can start by importing the necessary components from React-PDF:

import React from 'react';
import { Document, Page, Text, Font } from '@react-pdf/renderer';

Step 2: Removing Hyphens with Custom Hyphenation

React-PDF provides the Font.registerHyphenationCallback function to customize how words are hyphenated. To remove hyphens, you can return the entire word without splitting it:

Font.registerHyphenationCallback((word) => {
  // Return entire word as a single part
  return [word];
});

This callback prevents words from being split, thereby removing any automatic hyphenation.

Step 3: Implementing Word Wrapping

While removing hyphens is straightforward, ensuring the text wraps correctly without them requires additional steps:

const MyDocument = () => (
  
    
      
        Here is a long email: example.email@domain.com that needs proper wrapping.
      
    
  
);

The wordBreak: 'break-all' style property instructs the PDF to break lines only at word boundaries, ensuring no additional hyphens are inserted.

Step 4: Testing Your PDF Output

To test your setup, render the document to see if the email or any text wraps correctly without hyphenation:

import ReactDOM from 'react-dom';
import { PDFViewer } from '@react-pdf/renderer';

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

Run your application to ensure that the PDF displays the email addresses and other long text correctly wrapped without hyphens.

Common Errors/Troubleshooting

Here are some common issues and solutions:

• Text Overflows: If the text overflows the page, ensure your page size and padding are set correctly.
• Hyphens Still Appear: Double-check the hyphenation callback function; it should return the word as a whole.
• Word Wrapping Not Working: Use CSS styles like wordBreak to control text wrapping.

By following this guide, you should now have a PDF rendering solution that properly wraps text without inserting unwanted hyphens. Keep experimenting with styles and layout to fit your specific needs.

Frequently Asked Questions

Why are hyphens appearing in my PDFs?

Hyphens appear due to automatic word splitting in PDFs. Custom hyphenation callbacks can prevent this.

How can I ensure proper word wrapping?

Use CSS properties like wordBreak: 'break-all' to manage text wrapping without hyphens.

What if my text still overflows?

Check your page size and padding settings to ensure they accommodate the content.