Tailwind CSS. 当留言内容过多时，头像变形，内容未对齐。
$
5
目前使用的是 Tailwind CSS 3.x
页面中对文章内容的留言列表部分。
使用 Tailwind CSS 解决这样几个问题，生产使用，非玩具代码。同时，也要注意兼容性。
- 内容过多时，头像不应该发生变形。无论多少，都不应该发生这样的事情
- 多条留言时，会发生留言内容不对齐
- 在名字旁边，增加 Author，目前我的示例代码中有增加，但是折行显示了
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="bg-white px-4 py-10 lg:px-8 break-all">
<div class="mx-auto max-w-3xl text-base leading-7 text-gray-700">
<p>这里还有其他代码</p>
<div class="mt-10">
<ul role="list" class="divide-y divide-gray-100 mt-4">
<li class="flex gap-x-4 py-5" id="answer-3721491782">
<div>
<img class="h-10 w-10 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="name1989">
</div>
<div class="flex-auto">
<div class="flex items-baseline justify-between gap-x-4">
<p class="text-sm font-semibold leading-6 text-gray-900">
<a class="hover:underline line-clamp-1" href="xxxxxx">molongdadi</a>
</p>
<p class="flex-none text-xs text-gray-600">
<time datetime="2024-02-23">4 days ago</time>
</p>
</div>
<p class="mt-1 line-clamp-2 text-sm leading-6 text-gray-600"></p>
<p>xxxxx</p>
<p>We've done our best to ensure that all of the markup in Tailwind UI is as accessible as possible, but when you're building interactive components, many accessibility best practices can only be implemented with JavaScript.
</p>
<p>xxxxxxx</p>
<p>xxxxxxx</p>
<p></p>
<!--[if BLOCK]><![endif]-->
<!--[if ENDBLOCK]><![endif]-->
</div>
</li>
<li class="flex gap-x-4 py-5" id="answer-1650475107">
<div>
<img class="h-10 w-10 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="molongdadi">
</div>
<div class="flex-auto">
<div class="flex items-baseline justify-between gap-x-4">
<p class="text-sm font-semibold leading-6 text-gray-900">
<a class="hover:underline line-clamp-1" href="xxxxx">molongdadi</a>
</p>
<p class="flex-none text-xs text-gray-600">
<time datetime="2024-02-23">4 days ago</time>
</p>
</div>
<p class="mt-1 line-clamp-2 text-sm leading-6 text-gray-600"></p>
<p><a class="text-indigo-600 hover:text-indigo-900" rel="nofollow noopener" target="_blank" href="https://tailwindui.com/documentation#html-accessibility">https://tailwindui.com/documentation#html-accessibility</a></p>
<p></p>
</div>
</li>
<li class="flex gap-x-4 py-5" id="answer-3531534825">
<div>
<img class="h-10 w-10 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="wudimao">
</div>
<div class="flex-auto">
<div class="flex items-baseline justify-between gap-x-4">
<p class="text-sm font-semibold leading-6 text-gray-900">
<a class="hover:underline line-clamp-1" href="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">wudimao</a>
<span class="inline-flex mt-1 items-center rounded-md bg-gray-100 px-2 py-1 text-xs font-medium text-gray-600">Author</span>
</p>
<p class="flex-none text-xs text-gray-600">
<time datetime="2024-02-23">4 days ago</time>
</p>
</div>
<p class="mt-1 line-clamp-2 text-sm leading-6 text-gray-600"></p>
<p>Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.
<a class="text-indigo-600 hover:text-indigo-900" rel="nofollow noopener" target="_blank" href="https://tailwindui.com/documentation#html-accessibility">Initial Connection</a></p>
<p></p>
</div>
</li>
<li class="flex gap-x-4 py-5" id="answer-2450232267">
<div>
<img class="h-10 w-10 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="wudimao">
</div>
<div class="flex-auto">
<div class="flex items-baseline justify-between gap-x-4">
<p class="text-sm font-semibold leading-6 text-gray-900">
<a class="hover:underline line-clamp-1" href="xxxxx">wudimao</a>
</p>
<p class="flex-none text-xs text-gray-600">
<time datetime="2024-02-23">4 days ago</time>
</p>
</div>
<p class="mt-1 line-clamp-2 text-sm leading-6 text-gray-600"></p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<blockquote>
<p>https://tailwindcss.com/docs/installation/play-cdn</p>
</blockquote>
<blockquote>
<p>Warning</p>
</blockquote>
<blockquote>
<p>Get familiar with some of the core concepts that make Tailwind CSS different from writing traditional CSS.Get familiar with some of the core concepts that make Tailwind CSS different from writing traditional CSS.Get familiar with some of the core concepts that make Tailwind CSS different from writing traditional CSS.Get familiar with some of the core concepts that make Tailwind CSS different from writing traditional CSS.Get familiar with some of the core concepts that make Tailwind CSS different from writing traditional CSS.Get familiar with some of the core concepts that make Tailwind CSS different from writing traditional CSS.</p>
</blockquote>
<blockquote>
<p>It's fast, flexible, and reliable — with zero-runtime.It's fast, flexible, and reliable — with zero-runtime.It's fast, flexible, and reliable — with zero-runtime.It's fast, flexible, and reliable — with zero-runtime.It's fast, flexible, and reliable — with zero-runtime.</p>
</blockquote>
<p></p>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Solved