• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 Text</title>
7
    <style>
8
        #p_01, #p_02 {
9
            border: 1px solid black;
10
            white-space: nowrap;
11
            width: 200px;
12
            overflow: hidden;
13
        }
14
        #p_01 { text-overflow: clip; }
15
        #p_02 { text-overflow: ellipsis; }
16
        #p_01:hover, #p_02:hover { overflow: visible; }
17
    </style>
18
</head>
19
​
20
<body>
21
​
22
    <h1>콘텐츠 영역을 벗어난 텍스트 처리 방법</h1>
23
    <p id="p_01">콘텐츠 영역을 벗어난 텍스트 부분을 잘라냅니다.</p>
24
    <p id="p_02">콘텐츠 영역을 벗어난 텍스트 부분을 생략 부호를 사용하여 표현합니다.</p>
25
    <p>콘텐츠 영역에 마우스를 올려보세요!</p>
26
​
27
</body>
28
​
29
</html>