RSS

Tip of the day – WordWrap style property

18 Mar

Hi folks,

Here is the todays tip of the day.

Scenario : Specifies or returns whether the statement or a line should break if it exceeds. 

There are two ways to handle this scenario.

1. Using CSS
2. Javascript

Using CSS – Sample 1

<style>
.test
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
</style>

<body>
<p> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>

Sample Code : http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

Using CSS – Sample 2

<body>
<div style=”word-wrap: break-word;”>
breakonelongwordintomultiplewordsonmultiplelines.
</div>
<br />
<div style=”word-wrap: normal;”>
breakonelongwordintomultiplewordsonmultiplelines.
</div>
</body>

Using Javascript :

<head>
<style>
#myDiv {
word-wrap: normal;
width: 200px;
height: 150px;
background: #99C6CD;
}
</style>
<script type=”text/javascript”>
function ChangeWordSpacing (value) {
var div = document.getElementById (“myDiv”);
if (‘wordWrap’ in div.style) {
div.style.wordWrap = value;
} else {
alert (“Your browser doesn’t support this example!”);
}
}
</script>
</head>
<body>
<div id=”myDiv”>
breakonelongwordintomultiplewordsonmultiplelines.
</div>
<br />
<button onclick=”ChangeWordSpacing (‘break-word’);”>break-word</button>
<button onclick=”ChangeWordSpacing (‘normal’);”>normal</button>
</body>

Happy Learning!!.

Get glued to know more updates.

Have a nice day 🙂

Advertisements
 
Leave a comment

Posted by on March 18, 2013 in Uncategorized

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: