带有柔性箱的尾风不以水平方式生长。

Question

我用的是尾风。我怎样才能确保标签没有随着描述而增长？

​

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex items-center">
    <div>block</div>

    <div class="ml-6">
        <p>
            Title
        </p>
        
        <p class="bg-blue-500">
            Description long long long long long long long long long long long long long 
        </p> 

        <div class="px-2 py-1 bg-red-500 rounded-xl text-xs text-gray-700">
            Label...
        </div>
    </div>
</div>

​

Answer 1

可以将w-fit或内联显示样式用于<div ...> Label... (如inline或inline-block )。

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex items-center">
    <div>block</div>

    <div class="ml-6">
        <p>
            Title
        </p>
        
        <p class="bg-blue-500">
            Description long long long long long long long long long long long long long 
        </p> 

        <div class="px-2 py-1 bg-red-500 rounded-xl text-xs text-gray-700 w-fit">
            Label...
        </div>
    </div>
</div>