Kevin Powell - Community•2mo ago

Best practice for forcing text to wrap onto new line on a specific word

Currently I'm trying to wrap text onto 3 lines. I want the text to wrap on a specific word. My current solution is using <br/> elements but I read that is not a good practice and is bad for screen readers. How do I force line breaks on a specific word without affecting accessibility?

   
<h2 className="text-2xl sm:text-4xl text-center sm:text-left mb-6 font-bold drop-shadow-[3px_3px_0px_hsl(0,0%,82%)] ">
  Lorem ipsum dolor sit,
  <br />
  consectetur adipiscing,
  <br />
  sed do eiusmod labore?
</h2>

   
<h2 className="text-2xl sm:text-4xl text-center sm:text-left mb-6 font-bold drop-shadow-[3px_3px_0px_hsl(0,0%,82%)] ">
  Lorem ipsum dolor sit,
  <br />
  consectetur adipiscing,
  <br />
  sed do eiusmod labore?
</h2>

3 Replies

VitoOP•2mo ago

          <h2 className="text-2xl sm:text-4xl text-center sm:text-left mb-6 font-bold drop-shadow-[3px_3px_0px_hsl(0,0%,82%)] ">
            <div>Lorem ipsum dolor sit,</div>
            <div>consectetur adipiscing,</div>
            <div>sed do eiusmod labore?</div>
          </h2>

          <h2 className="text-2xl sm:text-4xl text-center sm:text-left mb-6 font-bold drop-shadow-[3px_3px_0px_hsl(0,0%,82%)] ">
            <span className="block">Lorem ipsum dolor sit,</span>
            <span className="block">consectetur adipiscing,</span>
            <span className="block">sed do eiusmod labore?</span>
          </h2>

          <h2 className="text-2xl sm:text-4xl text-center sm:text-left mb-6 font-bold drop-shadow-[3px_3px_0px_hsl(0,0%,82%)] ">
            <div>Lorem ipsum dolor sit,</div>
            <div>consectetur adipiscing,</div>
            <div>sed do eiusmod labore?</div>
          </h2>

          <h2 className="text-2xl sm:text-4xl text-center sm:text-left mb-6 font-bold drop-shadow-[3px_3px_0px_hsl(0,0%,82%)] ">
            <span className="block">Lorem ipsum dolor sit,</span>
            <span className="block">consectetur adipiscing,</span>
            <span className="block">sed do eiusmod labore?</span>
          </h2>

Ok so I have two solutions which both work. But from what I'm reading, the divs would also be bad for screen readers but I don't know about the spans.

ἔρως•2mo ago

i present to you: <wbr> throw some of those bad boys where you want to wrap where there isn't enough space, and the magic happens https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr if you need to break in the middle of a word, use 

VitoOP•2mo ago

Awesome, I'll check it out. Thank you

Gaming

Programming

Best practice for forcing text to wrap onto new line on a specific word