未能在 Tailwind CSS 表中进行换行答案

【问题标题】：Failed to do the line break in Tailwind CSS table未能在 Tailwind CSS 表中进行换行
【发布时间】：2021-07-16 12:37:04
【问题描述】：

有人可以帮助解决此问题吗？我想在触摸单元格边框时换行，但您可以在右下角（最后一行，原因列）那里看到，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>

【问题讨论】：

尝试设置单元格的最大宽度
@AjithGopi 单元格确实变小了，但行没有换行
尝试添加类break-normal
@AjithGopi 感谢您的回复，但效果不佳

标签： html css laravel laravel-blade tailwind-css

【解决方案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>

【讨论】：