목록에서 text 가 지정된 길이 이상일 때 ...(elipsis:생략부호)로 변경하기

내가 원하는 목적은 게시판의 목록을 보여주는데 일정 길이 이상이면 그 이상의 길이를 ... 으로 보여주는 것이다.

내가 원하는게 이런 모습이었는데

<li><a>[타이틀]</a><span>[날짜]</span></li>

이런 형태의 HTML 로 구현하여 처리하려고 했는데 어떻게 해도 타이틀 부분의 길이가 딱 맞아 지지가 않아서 우선 CSS로 처리하려고 시도를 했다.

스택오버플로우를 보고 처리하려고 했는데 타이틀의 길이가 li 의 전체 길이에 맞춰져서 날짜와 한 라인에 맞아지지가 않아서 일단은 DB에서 타이틀을 끊어서 가지고 오는 것으로 처리하였다. 

스택오버플로우의 내용은 한 라인에 타이틀만 들어갈 때 사용하면 될 것 같다. 

<style>    
#test li {
  list-style-position:inside;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;    
}
</style>

 위와 같이 워드랩을 nowrap으로 주고 처리하면된다.

DB에서 타이틀을 가져올 때 다음과 같이 case 문을 이용하여 문자의 길이를 기준으로 잘라서 처리하였다.

CASE
                         WHEN length(isr.request_title) > 20 THEN substr(isr.request_title, 0, 20) || '...'
                         ELSE ISr.Request_Title
                       END AS board_title

하고 싶었던 것은 CSS로 처리하고 싶었는데 어쩔수 없다.

다른 방법을 좀 더 찾아 보도록 해야겠다.