CSS overflow-wrap Property - Playground Example

« Back to CSS overflow-wrap Property

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.test {
   width: 300px;
   overflow-wrap: normal;
   background: azure; 
   border: 1px solid gray; 
} 
.test2 {
   width: 300px;
   overflow-wrap: break-word; 
   background: azure;
   border: 1px solid gray;
} 
</style>
</head>
<body>
<h2>Block with the overflow-wrap: normal value</h2> 
<div class="test">The longest village name in Europe: <a href = "https://en.wikipedia.org/wiki/Llanweir-Pullguingill" target = "_blank" title = "Read on Wikipedia"> Llanvairpullguingillogogerihirndrobullantisiliogogogo </a></div> 
<h2>Block with the value overflow-wrap: break-word</h2> 
<div class="test2">The longest village name in Europe: <a href = "https://en.wikipedia.org/wiki/Llanweir-Pullguingill" target = "_blank" title = "Read on Wikipedia"> Llanvairpullguingillogogerihirndrobullantisiliogogogo </a></div> 
</body>
</html>

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee