如何使跨度转到下一行

Question

顺便说一句，我正在使用 tailwind css。我如何自动 <br> 这段文本，它在某些 width

之后转到下一行

<div class="w-0 flex-1 flex items-center overflow-y-auto max-w-full">
  <label class="font-thin font-semibold text-yellow-300">||</label>

  <span class="ml-2 flex-1">Large  text that would normally need &lt;br&gt;</span>
</div>

满满的东西

<div class="flex flex-col bg-white px-8 py-6 max-w-sm mx-auto rounded-lg shadow-md overflow-y-auto">
                  <ul class="border border-gray-200 rounded-md divide-y divide-gray-200">
                    <li class="pl-3 pr-4 py-3 text-sm">
                      <div class="block flex-1 flex items-center overflow-y-auto max-w-full">
                        <label class="font-thin font-semibold text-yellow-300">||</label>
  
                        <span class="ml-2 flex-1 block overflow-y overflow-x-hidden" style="display: block;">
                          resume_back_end_developer.pdfskmaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                        </span>
                      </div>
                      
                    </li>
                    
                    </li>
                  </ul>
                    
                </div>

Answer 1

为了不弄乱其他 <span> 元素，请向该特定范围添加自定义 class。在我的示例中，我添加了 class br: <span class="ml-2 flex-1 br">

接下来我为 css 添加这个：.br { display: block; }。这会将 span 和 class br 从内联元素更改为块级元素。因此，默认情况下会发生换行行为。

.br {
  display: block;
}

<div class="w-0 flex-1 flex items-center overflow-y-auto max-w-full">
  <label class="font-thin font-semibold text-yellow-300">||</label>

  <span class="ml-2 flex-1 br">Large  text that would normally need &lt;br&gt;</span>
</div>

Answer 2

我相信您正在寻找的是break-words。它会在一定长度后添加换行符，如果需要的话甚至会打断单词。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="flex flex-col bg-white px-8 py-6 max-w-sm mx-auto rounded-lg shadow-md overflow-y-auto">
  <ul class="border border-gray-200 rounded-md divide-y divide-gray-200">
    <li class="pl-3 pr-4 py-3 text-sm">
      <div class="flex-1 flex items-center overflow-y-auto max-w-full">
        <label class="font-semibold text-yellow-300">||</label>
        <span class="ml-2 flex-1 block overflow-y overflow-x-hidden break-words"> resume_back_end_developer.pdfskmaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </span>
      </div>
    </li>
  </ul>
</div>

如何使跨度转到下一行

How to make span go to the next line

html

css

tailwind-css