2009
Text Wrapping In A Box
Wrapping is an important property for proper display of contents in web pages. In CSS3, the text wrapping is handled by 'text-wrap' and 'word-wrap' properties.The word-wrap property allows long words to be broken down and wrap onto the next line. It takes in 2 values: normal or break-word.
If normal value is used, the long word breaks out of the box. In other words, content will exceed the boundaries of the specified rendering box. However, if break-word is used, the long word is broken into pieces and wrap on the next line.
Demo 1
Below is an example of text-wrap in a box and its CSS and HTML codes.
At present, if a word is too long to fit within one line of an area, it expands outside. This isn’t a very common occurrence, but does crop up from time to time. The new word wrapping ability allows you to force the text to wrap - even if it means splitting it mid-word. The code is incredibly straight forward:
The CSS and HTML codes to get this effect are as follows:
<html>
<head>
<style type='text/css'>
.text_wrap1 {
word-wrap: break-word;
padding: 5px;
width: 450px;
font-size: 14px;
border: 2px solid #897048;
}
</style>
</head>
<body>
<div class="text_wrap1"><p>At present, if a word is too long to fit within one line of an area, it expands outside. This isn’t a very common occurrence, but does crop up from time to time. The new word wrapping ability allows you to force the text to wrap - even if it means splitting it mid-word. The code is incredibly straight forward:</p>
</div>
</body>
</html>
Applying the rounded corner effects on the CSS code will enable us to have a very nice rounded corners box.
Demo 2
Text-wrap in rounded corners box.
At present, if a word is too long to fit within one line of an area, it expands outside. This isn’t a very common occurrence, but does crop up from time to time. The new word wrapping ability allows you to force the text to wrap - even if it means splitting it mid-word. The code is incredibly straight forward:
Codes in orange color responsible for this effect.
<style type='text/css'>
.text_wrap2 {
word-wrap: break-word;
padding: 5px;
width: 450px;
font-size: 14px;
border: 2px solid #897048;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
</style>
We can make further modification on the CSS codes to have thicker, solid border or thin, dashed border.
Demo 3
Thick and solid border
At present, if a word is too long to fit within one line of an area, it expands outside. This isn’t a very common occurrence, but does crop up from time to time. The new word wrapping ability allows you to force the text to wrap - even if it means splitting it mid-word. The code is incredibly straight forward:
<style type="text/css">
.text_wrap3 {
word-wrap: break-word;
padding: 5px;
width: 450px;
font-size: 14px;
border: 5px solid #897048;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>
Demo 4
Thin, dashed border
At present, if a word is too long to fit within one line of an area, it expands outside. This isn’t a very common occurrence, but does crop up from time to time. The new word wrapping ability allows you to force the text to wrap - even if it means splitting it mid-word. The code is incredibly straight forward:
<style type='text/css'>
.text_wrap4 {
word-wrap: break-word;
padding: 5px;
width: 450px;
font-size: 14px;
border: 2px dashed #897048;
}
</style>
Subscribe to my feed