7 replies

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>

KP-C

Kevin Powell - Community•17mo ago•

7 replies

Vito

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

   
<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>

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads