CSS - 말줄임표(...) 사용

글자 수가 긴 경우 말줄임표(…)로 보여주기

표에서 스타일을 적용해놓고 글자 수가 넘어가면 height가 깨지면서 스타일이 망가지게 된다.
그런 경우를 방지하기 위해 말줄임표(…)을 사용하여 width에 제한을 걸어보자

예시)

<table border="1">
	<th>말줄임표 적용</th>
<tr>
	    <td>말줄임 사용해보겠습니다. 이렇게말을하다가 ...으로 변할 거예여 말줄임을 사용해보겠습니다.</td>
	</tr>
</table>

td{
    width: 500px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

• width: 500px; : width를 500px로 만들어준다.
• text-overflow: ellipsis : 오버플로된 내용을 말줄임표(…)로 바꿔준다. (display가 block또는 inline-block일때만 적용된다.)
• white-space: nowrap; : 텍스트가 길어도 줄바꿈이 되지 않는다.
• overflow: hidden; : 오버플로된 내용을 보이지 않게한다.
• display: block; : display속성을 블럭형태로 만들어준다.

결과)

text 중에 [줄임을 사용해보겠습니다.] 이 가려지고 … 으로 변하는 것을 볼 수 있다.