Quick Reach
The word-wrap property
The word wrap (CSS3) property specifies whether to break a word or not if the element (like a paragraph, div etc.) has less space. Otherwise, avoid overflow of long words beyond the boundary of the containing element.
See an example of the word-wrap property
The word-wrap syntax with values
The CSS word-wrap may have two values:
Word-wrap: normal;
Word-wrap: break-word;
The normal value in the word-wrap property means words should break at normal points whereas CSS break-word will break where containing element’s boundary is ending and word will be wrapped to the next line.
As such, this is CSS3 property, it is still to be compatible with all browsers.
See demonstration below for the better idea of how to use the word-wrap property.
Example of using word-wrap property with break-word value
The example below contains text within a div element. The div element has a solid border with the specific width. One word is too long and should either overflow or break to next line. As break-word value is assigned to the word-wrap property, it will break to the next line as shown in the example:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<html>
<head>
<style>
div
{
word-wrap:break-word;
width:150px;
border:2px solid #FF4400;
}
</style>
</head>
<body>
<div>
This is a div element with word-wrap example. This example should break word into next line as break-word property is used! See this word: abcdefghijklmnopqrstuvwxyz.
</div>
</body>
</html>
|
CSS no wrap example by word-wrap property
The example below uses the normal value in CSS word-wrap property. As a result, the long word (a-z) will overflow the div element. Alternatively, you can say that the text is set to no-wrap.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<html>
<head>
<style>
div
{
word-wrap:normal;
width:150px;
border:2px solid #FF4400;
}
</style>
</head>
<body>
<div>
This is a div element with word-wrap example. This example should not break word into next line as normal value is used! See this word: abcdefghijklmnopqrstuvwxyz.
</div>
</body>
</html>
|
Leave A Comment?