web analytics

How to Wrap Long Text and Break Words in CSS?

Options

codeling 1573 - 6555
@2019-12-22 10:37:48

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:

 

Comments

You must Sign In to comment on this topic.


© 2022 Digcode.com