악덕고용주의 개발 일기

[    CSS로 일정 길이 이상일 때 텍스트 줄임말 ...로 표시하기    ]

1. 가끔 일정 길이를 넘어가면 문자열이 ...으로 생략되듯이 표시되게 하고 싶거나

2. 혹은, textarea 내에서 문자열을 길게 입력하면 지정한 길이 이상일 때 자동으로 개행(줄바꿈) 되도록 처리하고 싶을 때가 있다.

먼저, 1번 일정 길이를 넘어가면 문자열이 ... 으로 생략되듯이 표시하게 하려면 다음의 조건이 필요하다.

1) width가 고정적일 것( 최대 표시될 너비를 꼭 지정되어야 한다.)

2) overflow: hidden; 을 사용해 영역을 감출 것

3) 아래줄로 내려가는 것을 막기위해 white-space: nowrap 등이 필요

4) 마지막으로, 반드시 block요소여야 한다. inline요소에는 적용이 안됨... 따라서 인라인 태그 요소일 경우 => display:block으로 지정해 주어야 함!

5) ...으로 표시하기 위해서 text-overflow:ellipsis 로 지정해야한다.

이를 적용하면

<style type="text/css">
  body p {

  display:block;
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap; 
  width: 100px;
  }
</style>

처럼 지정하면 된다.

-------------------------------------------------------------------------------------------

다음으로...

일정 길이 이상이면 자동으로 개행이 되도록 textarea에서 설정할 경우는 다음과 같이

white-space:normal; 를 써주면 된다. 역시 width가 지정되어야 한다.