[글자수 제한 css] 말줄임 css

글자수가 많은경우 가로 사이즈에 맞춰서 글자수 제한을 걸어야 할 때가 있다.

예를들면 게시판 영역의 제목부분 같은경우?

css로 간단하게 해결해주는 방법이 있었다니.....

substr과 같은 기능을 해주는 css..

 

<style>

.str{text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden}

</style>

 

<div class="str">

테스트하는 중입니다.테스트하는 중입니다.테스트하는 중입니다.테스트하는 중입니다.테스트하는 중입니다.

</div>

 

 

가로 크기에 맞춰서 글자가 길어지면 ...으로 표기해준다.

 

 

 

• 반응형일때는 max-width를 사용하여 영역을 잡아줌.
• Flex 레이아웃일 때는 .str을 감싸는 영역에 overflow:hidden 해줌
  
  

간혹 제목같은곳에 링크 걸 경우 string처리가 안될떄가 있는데 이유는 a요소가 inline이 아닐때 생긴다.

inline으로 변경하면 잘 된다.

 

**상위가 table이 있으면 안되는 경우가 있음.