Browser Support

Menu

Tailwind CSS Word Break

Word Break defines how text breaks and wraps when it doesn't fit within its container. This becomes particularly for ensuring content readability and maintaining responsive layouts, especially in scenarios involving unusually long strings URLs, or dynamic content.

Tailwind CSS provides a set of utilities for handling word-break properties efficiently. These utilities streamline the process of implementing word-breaking behavior, saving you the need to write customized CSS rules.

Class	Properties	Example
`break-normal`	`overflow-wrap: normal; word-break: normal;`	`<div className="break-normal"></div>`
`break-words`	`overflow-wrap: break-word;`	`<div className="break-words"></div>`
`break-all`	`word-break: break-all;`	`<div className="break-all"></div>`
`break-keep`	`word-break: keep-all;`	`<div className="break-keep"></div>`

Overview of Word Break

Adding the `break-normal`

The break-normal utility applies the default text wrapping behavior, where lines break only at natural word boundaries, such as spaces or hyphens.

This is a live editor. Play around with it!

export default function NormalWordBreak() {
  return (
    <div className="h-screen bg-gray-100 p-8">
      <p className="break-normal w-52 bg-white p-4 border-2 border-blue-400">
        Tailwind CSS enables efficient utility-based design. Browsecontentfromphotography repositories seamlessly.
      </p>
    </div>
  );
}

Adding the `break-words`

The break-words utility allows long words to break and wrap onto the next line if they exceed the container's width, preventing overflow.

This is a live editor. Play around with it!

export default function BreakWordsExample() {
  return (
    <div className="h-screen w-screen bg-blue-50 p-8">
      <p className="break-words w-52 bg-white border-2 border-gray-300 p-4">
        Here is an example where a veryveryveryveryverylongwordwithoutspaces might not fit within a container.
      </p>
    </div>
  );
}

Adding the `break-all`

The break-all utility forces text to break at any character if necessary, ensuring that content fits within the container without causing overflow, even if it means breaking words in unconventional places.

This is a live editor. Play around with it!

export default function BreakAllBehavior() {
  return (
    <div className="h-screen w-screen bg-gray-50 p-8">
      <p className="break-all w-52 bg-white border border-gray-500 p-4">
        abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
      </p>
    </div>
  );
}

Adding the `break-keep`

The break-keep utility is primarily used for languages like Chinese, Japanese, or Korean, this utility prevents line breaks within words, maintaining the integrity of the text. For non-CJK text, it behaves similarly to break-normal.

This is a live editor. Play around with it!

export default function KeepAllBehavior() {
  return (
    <div className="h-screen w-screen bg-gray-50 p-8">
      <p className="break-keep w-40 bg-white border border-gray-500 p-4">
        這是一個很長的中文句子，不應該被拆開。
      </p>
    </div>
  );
}

States and Responsiveness

Hover and Focus States

Tailwind allows you to conditionally apply the word break on certain states like hover and focus. Use Tailwind's state modifiers like- hover, focus, etc. to apply the utility only when these states are active, e.g., hover:break-all.

In the below example, hover on the container to break the word into multiple lines:

This is a live editor. Play around with it!

export default function HoverStateWordBreak() {
  return (
    <div className="h-screen w-screen bg-blue-50 p-8">
      <p className="hover:break-all w-52 bg-white border-2 border-gray-300 p-4">
        Here is an example where a veryveryveryveryverylongwordwithoutspaces might not fit within a container.
      </p>
    </div>
  );
}

Breakpoint Modifiers

Tailwind CSS provides breakpoint modifiers to conditionally apply the word break only when the screen hits the defined breakpoint. Use Tailwind's breakpoint modifiers like- sm, md, etc., to apply the utility only on these breakpoints and above.

In the below example, the word breaks into multiple lines at the md breakpoint:

This is a live editor. Play around with it!

export default function ResponsiveWordBreak() {
  return (
    <div className="h-screen w-screen bg-blue-50 p-8">
      <p className="md:break-all w-52 bg-white border-2 border-gray-300 p-4">
        Here is an example where a veryveryveryveryverylongwordwithoutspaces might not fit within a container.
      </p>
    </div>
  );
}

Real World Examples

A social media feed that handles long URLs and hashtags with appropriate breaking points.

This is a live editor. Play around with it!

const SocialFeed = () => {
  const posts = [
    {
      author: "TechEnthusiast",
      content: "Check out this amazing article about future technology trends!",
      url: "https://verylongtechnologywebsiteurl.com/article/future-trends-2025-and-beyond-comprehensive-analysis",
      hashtags: "#TechnologyTrends#FutureTech#Innovation#DigitalTransformation#AI#MachineLearning"
    },
    {
      author: "DesignGuru",
      content: "New design resources available for download!",
      url: "https://designresourcehubwebsite.com/downloads/ultimate-ui-design-kit-professional-version",
      hashtags: "#DesignResources#UIDesign#UserInterface#DesignTools#CreativeProcess#WebDesign"
    },
    {
      author: "CodeMaster",
      content: "Just published a new tutorial on advanced JavaScript patterns",
      url: "https://codingtuorialswebsite.com/tutorials/advanced-javascript-patterns-explained",
      hashtags: "#JavaScript#WebDevelopment#CodingTutorials#Programming#LearnToCode"
    },
    {
      author: "StartupFounder",
      content: "Great insights on building successful tech startups",
      url: "https://startupinsightsplatform.com/articles/building-successful-tech-startups-2025",
      hashtags: "#StartupLife#Entrepreneurship#TechStartups#BusinessGrowth#Innovation"
    },
    {
      author: "DataScientist",
      content: "Fascinating research on AI applications in healthcare",
      url: "https://artificialintelligenceresearch.org/papers/ai-healthcare-applications-2025",
      hashtags: "#DataScience#AI#Healthcare#Research#Innovation#Technology"
    },
    {
      author: "ProductManager",
      content: "Key insights from our latest product launch",
      url: "https://productmanagementblog.com/articles/successful-product-launch-strategy",
      hashtags: "#ProductManagement#ProductLaunch#Strategy#Innovation#Success"
    }
  ];

  return (
    <div className="p-4 bg-gray-50">
      <div className="space-y-3">
        {posts.map((post, index) => (
          <div key={index} className="bg-white p-3 rounded-lg shadow-sm">
            <div className="flex items-center mb-2">
              <div className="w-8 h-8 bg-blue-100 rounded-full"></div>
              <span className="ml-2 text-sm font-medium">{post.author}</span>
            </div>
            <p className="text-sm">{post.content}</p>
            <a href="#" className="text-xs text-blue-500 break-all block mt-2">
              {post.url}
            </a>
            <p className="text-xs text-gray-500 mt-2 break-words">
              {post.hashtags}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default SocialFeed;

Recipe Card Grid

A recipe card grid that handles long ingredient lists with appropriate word breaks.

This is a live editor. Play around with it!

const RecipeGrid = () => {
  const recipes = [
    {
      title: "Mediterranean Quinoa Bowl",
      ingredients: "quinoa,cherrytomatoes,cucumber,redonion,kalamataolives,fetacheese,extravirginoliveoil",
      time: "25 mins",
      difficulty: "Easy",
      src: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd",
      alt: "Quinoa bowl"
    },
    {
      title: "Spicy Thai Noodle Stir-Fry",
      ingredients: "ricenoodles,tofu,beansprouts,redpepper,carrots,greenonions,peanutsauce",
      time: "30 mins",
      difficulty: "Medium",
      src: "https://images.unsplash.com/photo-1534939561126-855b8675edd7",
      alt: "Noodle stir-fry"
    },
    {
      title: "Creamy Mushroom Risotto",
      ingredients: "arborio,rice,mushrooms,whitewine,parmesan,butter,chickenstock,thyme",
      time: "40 mins",
      difficulty: "Medium",
      src: "https://images.unsplash.com/photo-1476124369491-e7addf5db371",
      alt: "Mushroom risotto"
    },
    {
      title: "Rainbow Veggie Wrap",
      ingredients: "spinachtortilla,hummus,mixedgreens,carrot,cucumber,redcabbage,avocado",
      time: "15 mins",
      difficulty: "Easy",
      src: "https://images.unsplash.com/photo-1511690078903-71dc5a49f5e3",
      alt: "Veggie wrap"
    },
    {
      title: "Grilled Salmon Bowl",
      ingredients: "freshsalmon,brownrice,broccolini,sweetpotato,sesameoil,soysauce,ginger",
      time: "35 mins",
      difficulty: "Medium",
      src: "https://images.unsplash.com/photo-1467003909585-2f8a72700288",
      alt: "Salmon bowl"
    },
    {
      title: "Berry Breakfast Smoothie",
      ingredients: "mixedberries,greek yogurt,honey,chiaseeds,almondmilk,banana,protein",
      time: "10 mins",
      difficulty: "Easy",
      src: "https://images.unsplash.com/photo-1553530979-7ee52a2670c4",
      alt: "Smoothie"
    }
  ];

  return (
    <div className="p-4 bg-gray-50">
      <div className="grid grid-cols-2 gap-3">
        {recipes.map((recipe, index) => (
          <div key={index} className="bg-white p-2 rounded-lg shadow-sm">
            <img 
              src={recipe.src} 
              alt={recipe.alt}
              className="w-full h-24 object-cover rounded-md"
            />
            <h3 className="text-xs font-medium mt-2">{recipe.title}</h3>
            <p className="text-xs text-gray-500 mt-1 break-words">
              {recipe.ingredients}
            </p>
            <div className="flex justify-between mt-2 text-xs">
              <span>{recipe.time}</span>
              <span>{recipe.difficulty}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default RecipeGrid;

Event Timeline

An event timeline that handles long venue names and addresses with appropriate breaking points.

This is a live editor. Play around with it!

const EventTimeline = () => {
  const events = [
    {
      title: "International Tech Conference",
      venue: "SiliconValleyConventionCenter&InnovationHub",
      address: "1234TechnologyParkway,SanJose,California,UnitedStates,95112",
      date: "Mar 15, 2025",
      time: "9:00 AM"
    },
    {
      title: "Design Systems Workshop",
      venue: "CreativeInnovationLabs&CollaborationSpace",
      address: "567DesignDistrict,SanFrancisco,California,UnitedStates,94103",
      date: "Mar 20, 2025",
      time: "10:00 AM"
    },
    {
      title: "Startup Networking Event",
      venue: "EntrepreneurshipCenter&CoworkingSpace",
      address: "890StartupAlley,MountainView,California,UnitedStates,94041",
      date: "Mar 25, 2025",
      time: "6:00 PM"
    },
    {
      title: "AI & ML Symposium",
      venue: "AdvancedTechnologyResearch&DevelopmentCenter",
      address: "432InnovationDrive,PaloAlto,California,UnitedStates,94301",
      date: "Apr 1, 2025",
      time: "11:00 AM"
    },
    {
      title: "Web Development Summit",
      venue: "DigitalTransformation&LearningCenter",
      address: "765TechCampus,Sunnyvale,California,UnitedStates,94086",
      date: "Apr 5, 2025",
      time: "9:30 AM"
    },
    {
      title: "Product Management Conference",
      venue: "ProductInnovation&StrategyCenter",
      address: "321ProductRow,SantaClara,California,UnitedStates,95051",
      date: "Apr 10, 2025",
      time: "10:30 AM"
    }
  ];

  return (
    <div className="p-4 bg-gray-50">
      <div className="space-y-3">
        {events.map((event, index) => (
          <div key={index} className="bg-white p-3 rounded-lg shadow-sm">
            <div className="flex justify-between items-start">
              <h3 className="text-sm font-medium">{event.title}</h3>
              <div className="text-xs text-gray-500">
                <div>{event.date}</div>
                <div>{event.time}</div>
              </div>
            </div>
            <p className="text-xs text-gray-700 mt-2 break-all">
              {event.venue}
            </p>
            <p className="text-xs text-gray-500 mt-1 break-all">
              {event.address}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default EventTimeline;

File Directory

A file directory with long filenames that need breaking.

This is a live editor. Play around with it!

export default function FileDirectory() {
  const files = [
    {
      id: 1,
      name: "project-documentation-comprehensive-guide-version-2.0.pdf",
      type: "PDF",
      size: "2.5MB",
      icon: "https://images.unsplash.com/photo-1618477388954-7852f32655ec"
    },
    {
      id: 2,
      name: "final_presentation_for_stakeholders_meeting_updated_version.pptx",
      type: "PPTX",
      size: "5.8MB",
      icon: "https://images.unsplash.com/photo-1618477388954-7852f32655ec"
    },
    {
      id: 3,
      name: "financial_analysis_report_q2_2023_with_projections.xlsx",
      type: "XLSX",
      size: "1.2MB",
      icon: "https://images.unsplash.com/photo-1618477388954-7852f32655ec"
    },
    {
      id: 4,
      name: "user_research_findings_and_recommendations_final_draft.docx",
      type: "DOCX",
      size: "3.7MB",
      icon: "https://images.unsplash.com/photo-1618477388954-7852f32655ec"
    },
    {
      id: 5,
      name: "marketing_campaign_assets_and_brand_guidelines_2023.zip",
      type: "ZIP",
      size: "15.2MB",
      icon: "https://images.unsplash.com/photo-1618477388954-7852f32655ec"
    },
    {
      id: 6,
      name: "source_code_backup_with_development_notes_version_1.2.tar.gz",
      type: "TAR.GZ",
      size: "8.9MB",
      icon: "https://images.unsplash.com/photo-1618477388954-7852f32655ec"
    }
  ];

  return (
    <div className="max-w-4xl mx-auto p-6">
      <div className="border rounded-lg">
        {files.map((file) => (
          <div
            key={file.id}
            className="flex items-center gap-4 p-4 border-b last:border-b-0 hover:bg-gray-50"
          >
            <img
              src={file.icon}
              alt={file.type}
              className="w-8 h-8"
            />
            <div className="flex-1">
              <p className="break-all font-medium">{file.name}</p>
              <div className="flex gap-4 mt-1 text-sm text-gray-500">
                <span>{file.type}</span>
                <span>{file.size}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Error Message Display

This example shows error messages with long technical details that need word breaking.

This is a live editor. Play around with it!

const CodeSnippetGallery = () => {
  const snippets = [
    {
      title: "Utility Function",
      language: "JavaScript",
      code: `function handleAsynchronousDataProcessing(dataArray) {
  return Promise.all(dataArray.map(async (item) => {
    const processedData = await processData(item);
    // Validate and return the processed data with additional checks
    return validateProcessedData(processedData);
  }));
}`,
      author: "dev_sarah",
      likes: 234
    },
    {
      title: "React Custom Hook",
      language: "JavaScript",
      code: `function useComplexStateManagement(initialState) {
  const validateAndTransformData = data => ({
    ...data,
    lastUpdated: Date.now(),
    status: data.isValid ? 'success' : 'error'
  });
  
  return [state, setState];
}`,
      author: "react_master",
      likes: 189
    },
    {
      title: "API Handler",
      language: "TypeScript",
      code: `async function fetchAndProcessDataWithErrorHandling<T>(
  endpoint: string,
  options: RequestOptions
): Promise<APIResponse[T]> {
  try {
    const response = await retryOperation(() => 
      fetchWithTimeout(endpoint, options)
    );
    return processAPIResponse(response);
  } catch (error) {
    handleAPIError(error);
  }
}`,
      author: "typescript_pro",
      likes: 156
    },
    {
      title: "State Manager",
      language: "JavaScript",
      code: `class ComplexStateManagementSystem {
  constructor() {
    this.subscribers = new Set();
    this.middlewares = [];
    this.state = {};
    this.initialize();
  }
  
  addMiddleware(middleware) {
    this.middlewares.push(middleware);
  }
}`,
      author: "state_ninja",
      likes: 321
    },
    {
      title: "Data Transformer",
      language: "TypeScript",
      code: `function transformAndValidateData<T extends Record<string, unknown>>(
  input: T[]
): ValidatedOutput[] {
  return input.map(item => {
    const transformed = applyTransformation(item);
    return validateOutput(transformed);
  });
}`,
      author: "data_wizard",
      likes: 167
    },
    {
      title: "Authentication Helper",
      language: "JavaScript",
      code: `const handleAuthenticationAndAuthorization = async (
  user,
  permissions
) => {
  const validatedPermissions = await validateUserPermissions(user);
  const authResult = await checkUserAuthorization(validatedPermissions);
  return processAuthResult(authResult);
}`,
      author: "security_expert",
      likes: 289
    }
  ];

  return (
    <div className="p-4 bg-gray-900">
      <div className="space-y-3">
        {snippets.map((snippet, index) => (
          <div key={index} className="bg-gray-800 p-3 rounded-lg">
            <div className="flex justify-between items-center mb-2">
              <div>
                <h3 className="text-sm font-medium text-gray-200">
                  {snippet.title}
                </h3>
                <span className="text-xs text-gray-400">
                  {snippet.language}
                </span>
              </div>
              <div className="flex items-center space-x-2">
                <span className="text-xs text-gray-400">
                  {snippet.likes} ❤️
                </span>
                <span className="text-xs text-gray-400">
                  {snippet.author}
                </span>
              </div>
            </div>
            <div className="bg-gray-900 p-2 rounded">
                <code className="overflow-auto text-xs text-green-400 break-words">
                  {snippet.code}
                </code>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default CodeSnippetGallery;

Best Practices

Maintain Design Consistency

To achieve consistency, predefine word breaking strategy for specific use cases. For example, applying break-words to long-form content ensures better readability, while break-normal works well in UI components where word integrity must be preserved.

Testing different font styles and text lengths on multiple devices is also crucial for refining how break-* utilities behave. Proper use of leading-* and tracking-* ensures that word-breaking do not negatively impact readability, resulting in an intuitive and user-friendly experience.

Build Responsive Design

Applying break-* utilities responsively is crucial for maintaining an optimal reading experience across devices. Tailwind's responsive prefixes (sm:, md:, lg:) allow word-breaking behavior to be adjusted dynamically based on screen size. This prevents content overflow on small screens while preserving layout integrity on larger displays.

For instance, on mobile views, break-words can be applied to prevent long text from causing horizontal scrolling. However, on wider screens, break-normal can ensure that text remains readable without unnecessary word fragmentation.

Accessibility Considerations

Enhance Readability and Navigability

Applying break-* utilities in an accessible manner improves readability and navigability for all users. Breaking long words incorrectly can hinder comprehension, especially for users with cognitive impairments. Using break-words instead of break-all ensures that word fragmentation does not disrupt the natural reading flow.

Additionally, pairing break-* utilities with appropriate spacing and padding can enhance text clarity. Ensuring that text containers have sufficient line height (leading-*) and contrast against the background helps users read content more comfortably. Testing text-breaking strategies with screen readers ensures that assistive technologies interpret content correctly.

Focus on High Contrast

Ensuring high contrast in text layouts when using break-* utilities is crucial for accessibility. Placing broken words against low-contrast backgrounds can make them harder to read, reducing overall usability. Use sufficient color contrast ratios to ensure that text remains legible in various viewing conditions, including different screen brightness levels and night mode settings.

Additionally, considering the background complexity is essential. Text that breaks over patterned or busy backgrounds may become difficult to read, even if contrast is technically sufficient. A practical approach is to use background overlays or semi-transparent backgrounds to enhance clarity.

Vertical Align Backgrounds