html - 无法在 Tailwind CSS 表中进行换行

Question

有人可以帮助解决这个问题吗？我想在触摸单元格的边框时换行，但您可以在右下角(最后一行，原因列)那里看到，This is a long.....reason 没有当它撞到边界时就破了。我试过固定表，断字..方法，对我都没有用。请问可能是什么原因？

(抱歉，HTML 代码可能看起来有点乱，因为我一直在尝试不同的方式。)

<div class="-my-2 overflow-hidden sm:-mx-6">
    <div class="py-2 align-middle inline-block sm:px-6 lg:px-8">
        <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
            <table class="divide-y divide-gray-200 table-fixed">
                <thead class="bg-gray-50">
                <tr>
                    <th class="w-1/2 px-6 py-3 bg-gray-200 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">
                        Requestor
                    </th>
                    ......
                    <th class="w-1/2 px-6 py-3 bg-gray-200 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">
                        Reason
                    </th>
                    @can('manage-users')
                        <th scope="col" class="relative px-6 py-3 bg-gray-200 ">
                            <span class="sr-only">Edit</span>
                        </th>
                    @endif
                </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                @foreach ($applications as $application)
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-10 w-10">
                                    <img class="h-10 w-10 rounded-full"
                                         src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60"
                                         alt="">
                                </div>
                                <div class="ml-4">
                                    <div class="text-sm font-medium text-gray-900">
                                        {{ $application->user->name }}
                                    </div>
                                    <div class="text-sm text-gray-500">
                                        {{ $application->user->email }}
                                    </div>
                                </div>
                            </div>
                        </td>
                        ...
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ $application->request_reason }}
                        </td>
                        @can('manage-users')
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button
                                        class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full"
                                        wire:click="selectItem({{ $application->id }}, 'Approve')">
                                    Approve
                                </button>
                                <button
                                        class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full"
                                        wire:click="selectItem({{ $application->id }}, 'Reject')">
                                    Reject
                                </button>
                            </td>
                        @endif
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>
</div>

Answer 1

我已经添加了类 break-all到细胞并给w-full到 <table> .如果这不是您要找的，请发表评论。

break-normal仅当内容之间有空格时才有效。

你可以设置一个max-width为单元格限制该特定列的宽度。

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.1/tailwind.min.css" rel="stylesheet" />

<div class="-my-2 overflow-hidden sm:-mx-6">
  <div class="py-2 align-middle inline-block sm:px-6 lg:px-8">
    <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
      <table class="divide-y divide-gray-200 table-fixed w-full">
        <thead class="bg-gray-50">
          <tr>
            <th class="w-1/2 px-6 py-3 bg-gray-200 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">
              Requestor
            </th>
            <th class="w-1/2 px-6 py-3 bg-gray-200 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">
              Reason
            </th>
            <th scope="col" class="relative px-6 py-3 bg-gray-200 ">
              <span class="sr-only">Edit</span>
            </th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          <tr>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900">
                    Someone J
                  </div>
                  <div class="text-sm text-gray-500">
                    someone@gmail.com
                  </div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 text-sm text-gray-500 break-all">
               wefwe wefffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
</div>
</div>