테이블 .... 로 표시하기(table-layout, text-overflow, white-space:nowrap, overflow:hidden)

안녕하세요?
오늘은 정해진 테이블 칸보다 안의 내용이 클 때 대처하는 방법에 대해 알아보겠습니다.
여러 방법이 있겠지만, 가장 대표적인 것을 CSS로 처리해 볼 건데요..

바로 일정 내용만 보인 후, 뒤의 내용은 (....) 으로 표현할 거에요!!
아래 예시를 통해 알아보겠습니다!

정상적인 상황

안녕하세요

반갑습니다.

짧은 내용이라면 테이블이 뒤틀리거나 커지는 현상은 없습니다. 아주 정상적이죠..ㅎㅎ
하지만 아래와 같아 진다면..?!

안녕하세요? 저는 OO시 △△구 ㅁㅁ동에 사는 아무개입니다. 저의 취미는 독서이고 특기는 사람들을 잘 사귄다는 점 입니다.

만나서 반갑습니다.

ㅠㅠ.. 테이블 <td>의 크기가 자기 마음대로 커지고 줄어드네요..
일단은 <td>의 크기를 고정하는 작업을 해야합니다.

안녕하세요? 저는 OO시 △△구 ㅁㅁ동에 사는 아무개입니다. 저의 취미는 독서이고 특기는 사람들을 잘 사귄다는 점 입니다.

만나서 반갑습니다.

<table style="table-layout: fixed">
	<tr>
		<td style="width:50%;">
			안녕하세요? 저는 OO시 △△구 ㅁㅁ동에 사는 아무개입니다. 
                        저의 취미는 독서이고 특기는 사람들을 잘 사귄다는 점 입니다. 
		</td>
		<td style="width:50%;">
			만나서 반갑습니다.
		</td>
	</tr>
</table>

초록색 글씨의 CSS가 중요한 점인데요.. table-layout:fixed 라는 스타일을 Table에 줌으로써 크기를 고정시킬 수 있습니다.
하지만 보시다시피, 크기만 고정되었을 뿐.. 글씨 크기에 맞게 높이가 커지고 말았네요.. 이제 다 왔습니다.
마지막으로 저희가 원하던, 뒷 부분을 ...... 로 표현해 보겠습니다.!

안녕하세요? 저는 OO시 △△구 ㅁㅁ동에 사는 아무개입니다. 저의 취미는 독서이고 특기는 사람들을 잘 사귄다는 점 입니다.

만나서 반갑습니다.

<tablestyle="table-layout: fixed">
	<tr>
		<td style="width:50%;  text-overflow:ellipsis; overflow:hidden; white-space:nowrap;">
			안녕하세요? 저는 OO시 △△구 ㅁㅁ동에 사는 아무개입니다. 
                        저의 취미는 독서이고 특기는 사람들을 잘 사귄다는 점 입니다. 
		</td>
		<td style="width:50%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;">
			만나서 반갑습니다.
		</td>
	</tr>
</table>

이번에도 초록색 글씨의 CSS가 핵심입니다.
text-overflow는 긴 문장을 짧게 표현해 주는 것인데 속성으로는 'string, clip, ellipsis' 3가지가 있습니다.
string은 사용자가 지정한 문자열로 뒤 잘리는 문장을 표현해 주는 것입니다.(style=text-overflow:"~" 식으로 하게 된다면 뒤에 잘리는 부분이 ~로 나옵니다. 다만 현재 string은 지원하는 브라우저가 존재하지 않습니다.)
clip은 뒤에 문장을 잘라버림으로써 보이지 않게 해주는 것입니다.
마지막으로 ellipsis는 위의 예시에서 보다시피 ... 으로 표현해 주도록 하는거죠.

white-space:nowrap; 속성은 줄바꿈을 강제로 하지 않도록 해주는 CSS입니다.

overflow:hidden은 스크롤이 생기지 않도록 해주는 속성입니다.


항상 이 3가지 속성이 수반되어야만 말 줄임표가 올바르게 동작함을 명심해주시기 바랍니다.

마지막 깨알 TIP!

말 줄임표로 뒤에 문장을 볼 수 없기 때문에 alt/title(차이점 보러 가기)과 같은 말풍선 속성을 추가해 주도록 하는 센스!!