Missing: overflow-wrap: anywhere

[reindert-vetter]

Feature Request: Improved Text Wrapping in Tailwind CSS for Tables

I am working on a table where columns need to be distributed evenly. In this example, I am using line-clamp-2 for controlling text overflow.

Currently, Tailwind's break-all utility is insufficient because it breaks words into individual letters. Instead, I need a more flexible solution.

Issue with break-all

Using break-all results in words being broken in an undesirable way, as shown below:

Desired Behavior with overflow-wrap: anywhere

The style="overflow-wrap: anywhere" property provides the perfect behavior, wrapping words intelligently without breaking individual letters:

Example HTML

Below is the HTML for the table that demonstrates the situation:

<table class="table-auto" style="overflow-wrap: anywhere">
  <thead class="hidden sm:table-header-group text-left border-b border-gray-300">
    <tr>
      <th class="w-[20px]"></th>
      <th class="pt-4 pr-2 pb-4 pl-4">Link</th>
      <th class="pt-4 pr-2 pb-4 pl-4">Title</th>
      <th class="w-[140px]"></th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-t transition-all hover:bg-gray-100 relative border-b border-gray-200">
      <td class="p-3 sm:pl-4">
        <span id="async-content-link703"><span class="line-clamp-2">/docs/database#:~:text=Example%3A%20Nested%20Foreach%20Loops</span></span>
      </td>
      <td class="p-3 sm:pl-4 hidden sm:table-cell">
        <span id="async-content-title0"><span class="line-clamp-2">Example: Nested Foreach Loops</span></span>
      </td>
    </tr>
  </tbody>
</table>

Request

Add support for a utility class in Tailwind CSS, such as overflow-wrap-anywhere, to enable the use of overflow-wrap: anywhere. This would allow developers to manage text wrapping effectively without relying on inline styles.