Sunday, 24 July 2016

How to use word-wrap css property


When you have long words you will be able to break them and force them to next line using word-wrap property

for example:
ThisisacooltutorialforusThisisacooltutorialforus is a word

if we do not apply word-wrap property for this word in our css it will show as it is

if we apply word-wrap property for this word in css it will break that word based on the remaining space on the right side of the text.

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://use.fontawesome.com/0809c7e939.js"></script>
<style>
body {
background: #6f6f6f;
}

div {
background: lightgrey;
width: 200px;
}

div p {
color: #999;
word-wrap: break-word;
}
</style>
</head>
<body>
<div>
<p>
I liked this blog. This is a good blog for beginners.
Thankyouverymuch -<b>ThisisacooltutorialforusThisisacooltutorialforus</b>
I liked this blog. This is a good blog for beginners.
Thankyouverymuch -Thisisacooltutorialforus I liked this blog. This is
a good blog for beginners. Thankyouverymuch -Thisisacooltutorialforus
I liked this blog. This is a good blog for beginners.
Thankyouverymuch -Thisisacooltutorialforus
</p>
</div>
</body>
</html>



Output:

No comments:

Post a Comment