<html>
<head>
<style type="text/css">
#edit_status_select { line-height: 25px; width: 200px; background: cyan; border: 1px solid #777; }
#edit_status_select a { display: block; background: white; }
wbr:before { content: "\0"; } /* :after also causes it */
</style>
</head>
<body>
You should not see any cyan.
<div id="edit_status_select">
<a href="#">foo<wbr>bar</a>
</div>
</body>
</html>