• CSS Advanced
  • CSS Text Effects
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style>
5
    p {
6
        width: 150px;
7
        border: 1px solid black;
8
    }
9
    .ex1 {
10
        word-break: normal;
11
    }
12
    .ex2 {
13
        word-break: keep-all;
14
    }
15
    .ex3 {
16
        word-break: break-all;
17
    }
18
</style>
19
</head>
20
<body>
21
​
22
<h2>word-break: normal (default)</h2>
23
<p class="ex1">Thisissomeveryveryverylongword. Words will break according to usual rules.</p>
24
​
25
<h2>word-break: keep-all</h2>
26
<p class="ex2">Thisissomeveryveryverylongword. This text will-break-at-hyphens.</p>
27
​
28
<h2>word-break: break-all</h2>
29
<p class="ex3">Thisissomeveryveryverylongword. This text will break at any character.</p>
30
​
31
</body>
32
</html>