On mobile devices a very common issue is when text strings are too long to fit inside the container element thus overflowing it, such as we often see it while displaying URLs because they are typically longer text strings that do not contain natural breaks. This issue cab be fixed easily by using the CSS word-break property.
Here's a CSS :
div.wraptext
{
overflow-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
}
See the following demo html page:
<html>
<head>
<style>
div.wraptext
{
width:200px;
overflow: auto;
min-height:150px;
background-color:#FFFFBE;
overflow-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
}
</style>
<title>Test long text wrap</title>
</head>
<body>
<h3>Long text wrap demo</h3>
<p>https://blogs.msdn.microsoft.com/dotnet/</p>
<div class="wraptext">
<p>https://blogs.msdn.microsoft.com/dotnet/</p>
</div>
</body>
</html>
The output in IE lookes like:
