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>