[css]넘치는 텍스트 ... 처리하기 ellipsis

    <style>
        .over_text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .box_css{
           width: 100px;
           height: 50px;
           border:1px solid #777;
           padding:10px;
        }

    </style>

    <div class="box_css over_text">100px보다 넘치는 텍스트를 작성하면 넘치는 글자는 ...처리됩니다 </div>

* 반드시 텍스트를 감싸고 있는 태그의 width를 지정해 줘야합니다. 

* white-space: nowrap; 태그가 없으면 자동 줄바뀜이 되기 때문에 가로 길이에 대한 ellipsis가 적용되지 않습니다

---

실행화면▼

100px보다 넘치는 텍스트를 작성하면 넘치는 글자는 ...처리됩니다