How to make span go to the next line - html

Question

Im using tailwind css by the way. How can i auto <br> this text where it just goes to the next line after certain 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 <br></span>
</div>
full thing
<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

I believe what you're looking for is break-words. It will add line breaks after a certain length, even breaking words if needed.
<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>

Answer 2

To not mess up other <span> elements, add a custom class to that specific span. In my sample I added the class br: <span class="ml-2 flex-1 br">
Next I add this for the css: .br { display: block; }. That will change the span with the class brto change from inline-element to a block level element. As such a linebreak behavior will happen by default.
.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 <br></span>
</div>