How to make a DIV wrap for content with no whitespace?

Question

I am trying to get a DIV element to wrap its content despite the content not having any whitespace. The content is a nucleic acid sequence, so inserting whitespace every x-characters is possible, but I'd rather do it more elegantly if possible.

e.g.

 <div>TCTTGCTGCGCCTCCGCCTCCTCCTCTGCTCCGCCACCGGCTTCCTCCTCCTGAGCAGTCAGCCCGCGCGCCGGCCGGCTCCGTTATGGCGACCCGCAGCCCTGGCGTCGTGGTGAGCAGCTCGGCCTGCCGGCCCTGGCCGGTTCAGGCCCACGCGGCAGGTGGCGGCCGGGCCCTGAGGCGCGGGATCCGCAGTGCGGGCTCGGGCGGCCGGGCCCAGGGAACCCCGCAGGCGGGGGCGGCCAGTTTCCCGGGTTCGGCTTTACGTCACGCGAGGGCGGCAGGGAGGACGGAATGGCGGGGTTTGGGGTGGGTCCCTCCTCGGGGGAGCCCTGGGAAAAGAGGACTGCGTGTGGGAAGAGAAGGTGGAAATGGCGTTTTGGTTGACATGTGCCGCCTGCGAGCGTGCTGCGGGGAGGGGCCGAGGGCAGATTCGGGAATGATGGCGCGGGGTGGGGGCGTGGGGGCTTTCTCGGGAGAGGCCCTTCCCTGGAAGTTTGGGGTGCGATGGTGAGGTTCTCGGGGCACCTCTGGAGGGGCCTCGGCACGGAAAGCGACCACCTGGGAGGGCGTGTGGGGACCAGGTTTTGCCTTTAGTTTTGCACACACTGTAGTTCATCTTTATGGAGATGCTCATGGCCTCATTGAAGCCCCACTACAGCTCTGGTAGCGGTAACCATGCGTATTTGACACACGAAGGAACTAGGGAAAAGGCATTAGGTCATTTCAAGCCGAAATTCACATGTGCTAGAATCCAGATTCCATGCTGACCGATGCCCCAGGATATAGAAAATGAGAATCTGGTCCTTACCTTCAAGAACATTCTTAACCGTAATCAGCCTCTGGTATCTTAGCTCCACCCTCACTGGTTTTTTCTTGTTTGTTGAACCGGCCAAGCTGCTGGCCTCCCTCCTCAACCGTTCTGATCATGCTTGCTAAAATAGTCAAAACCCCGGCCAGTTAAATATGCTTTAGCCTGCTTTATTATGATTATTTTTGTTGTTTTGGCAATGACCTGGTTACCTGTTGTTTCTCCCACTAAAACTTTTTAAGGGCAGGAATCACCGCCGTAACTCTAGCACTTAGCACAGTA</div>

I need not support every browser. I'm mainly interested in Chrome, Safari and Firefox and other standards-compliant browsers.

Answer 1

CSS style like this will help:

word-wrap:break-word

Other CSS settings that control wrapping are described here.

Answer 2

You can use a "breaking zero-width space" (​), which will break the word but will be ignored when copying into, say, notepad.