Long word not breaking/overflowing in tablet mode

Hi there, this is probably a simple fix, but there is one long word (an email) that seems to stick out from its parent div and text box when in tablet mode. This is an issue as it is overlapping some text in the column next to it. How can I fix this?

attached is a screenshot of whats happening, I would be happy for there to be a breakpoint in the email like shown in the second screenshot when i’ve clicked in the text box, but I dont know how to achieve that.

thank you!

Personally, I would use a link with a “Email Me” anchor text since most people would not want to copy and paste, nor type it in. It would get harvested by bots anyway.

That being said, If you want to control exactly where you want the break to occur, you could wrap the part of that string you want to break on with a span. Give the span a class. Now set that class Display to block on the tablet breakpoint.

If you need to catch up on adding a span to a text block, the details can be found below.

Cheers @webdev, thanks for your help!

1 Like

Your welcome. Have a great day!

This will work too…

<style>

body { 
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
  hyphens: auto;
}
</style>
2 Likes