긴 문자열에 대한 생략기호(...) 적용

테이블 형태로 데이터를 표현할때 데이터가 긴 항목이 포함되어 있으면 여러줄로 나오는 경우가 있어 난감하다.(물론 이렇게 나와도 상관없다면 별문제 없겠지만...)

이런경우 보통은 한줄에 나올만큼만 표시하고 끝에 생략을 나타내는 기호(...)를 써서 표시한다.

이 기능을 CSS로 구현하려면 아래와 같다.

  

    

      
생략기호 미적용
      

        테이블 형태로 데이터를 표현할때 데이터가 긴 항목이 포함되어 있으면 여러줄로 나오는 경우가 있어 난감하다.
      
    
    

      
생략기호 적용
      

        

          테이블 형태로 데이터를 표현할때 데이터가 긴 항목이 포함되어 있으면 여러줄로 나오는 경우가 있어 난감하다.
        
      
    
  

Code 1. HTML

table {
  width: 500px;
  border-collapse: collapse;
}

.td1 {
  border: 1px solid #dddddd;
  padding: 5px;
  width: 150px;
}

.td2 {
  border: 1px solid #dddddd;
  padding: 5px;
  width: 350px;
}

.text-over-cut {
	display: block;
	width: 350px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
}

Code 2. CSS

CSS에서 생략기호 처리를 하는 부분은 'text-over-cut' 으로 선언한 부분이다. 자세히 보면...

display: block;	박스 표시 방식은 block
width: 350px;	박스의 넓이를 반드시 지정
white-space: nowrap;	개행을 하지 않도록 설정
overflow: hidden;	박스에서 벗어나는 부분은 숨김
text-overflow: ellipsis;	박스에서 벗어나는 경우 생략기호 처리

주의할 것은 적용하는 박스의 넓이가 반드시 특정되어야 적용된다. width가 %로 되어있는 경우 스크립트에서 width값를 알아내어 해당 값으로 다시 세팅 하면 된다.