JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p.test1
{
width:11em;
border:1px solid #000000;
word-break:hyphenate;
}
p.test2
{
width:11em;
border:1px solid #000000;
word-break:break-all;
}
</style>
</head>
<body>
<p class="test1">Here_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf</p>
<p class="test2"> Here_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf</p>
<p><b>Note:</b> The word-break property does not work in Opera.</p>
</body>
</html>