본문 바로가기
basic/CSS

텍스트 말줄임 ...

ekgoddldi 2021. 6. 9. 00:37

한줄 말 줄이기...

display:block; overflow:hidden; text-overflow:ellipse; white-space:nowrap; //ellipse는 ... 효과를 만들어 주고 nowrap은 줄바꿈이 안되게 해준다

 

여러줄
말 줄이기...

overflow:hidden; text-oveflow:ellipse; 까지는 똑같지만

크롬계열 브라우저에서는

display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:줄 수;

IE를 위해서는

max-height값을 설정해준다. 값은 line-height X 줄수

 

table에 적용한 예시

 

 

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 80%;
            margin: 0 auto;
            border: 1px solid black;
        }
        th,
        td {
            border: 1px solid black;
        }
        .txt {
            table-layout: fixed;
            display: table;
            width: 100%;
            /* white-space: nowrap; */
        }
        .txt>p {
            /* display: table-cell; */
            overflow: hidden;
            text-overflow: ellipsis;
            display:-webkit-box; 
            -webkit-box-orient:vertical; 
            -webkit-line-clamp:3;
        }
    </style>
</head>
 
<body>
    <table>
        <tr>
           <td>
               <div class="txt">
                   <p>
                   Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus qui accusantium, labore fugiat corporis in est repellat dignissimos maiores impedit quasi quisquam. Nihil obcaecati incidunt aut quis dolores officiis exercitationem.
                   </p>
               </div>
           </td>
           <td>
            <div class="txt">
                <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus qui accusantium, labore fugiat corporis in est repellat dignissimos maiores impedit quasi quisquam. Nihil obcaecati incidunt aut quis dolores officiis exercitationem.
                </p>
            </div>
        </td>
        <td>
            <div class="txt">
                <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus qui accusantium, labore fugiat corporis in est repellat dignissimos maiores impedit quasi quisquam. Nihil obcaecati incidunt aut quis dolores officiis exercitationem.
                </p>
            </div>
        </td>
        <td>
            <div class="txt">
                <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus qui accusantium, labore fugiat corporis in est repellat dignissimos maiores impedit quasi quisquam. Nihil obcaecati incidunt aut quis dolores officiis exercitationem.
                </p>
            </div>
        </td>
        </tr>
    </table>
 
 
 
 
 
 
 
 
</body>
 
</html>

'basic > CSS' 카테고리의 다른 글

inline-block 버그  (0) 2021.12.22
Transform  (0) 2021.06.18
float 해제 하는법  (0) 2021.06.08
Simple reset css  (0) 2021.06.08
css blind 요소 숨김처리 기법  (0) 2021.06.08

'basic/CSS' Related Articles

티스토리툴바