DEV/HTML&CSS

테이블에서 글자수 많으면 ... 으로 표시하는 방법

어쩌다개발 2019. 1. 30. 17:32
반응형

아래와 같이 제목이 너무 긴 경우 길이가 잘리는게 아니라 2줄로 표시된다.

번호제목작성자작성일
1동해물과백두산이마르고닳도록하느님이보우하사우리나라만세홍길동2014-12-12
2동해물과백두산이마르고닳도록하느님이보우하사우리나라만세홍길동2014-12-12
3동해물과백두산이마르고닳도록하느님이보우하사우리나라만세홍길동2014-12-12



위와 같은 경우를 아래처럼 바꾸고 싶을때, 테이블에서 정해놓은 width 를 넘어가면 ... 으로 표시되게 하기

번호제목작성자작성일
1동해물과백두산이마르고닳도록하...홍길동2014-12-12
2동해물과백두산이마르고닳도록하...홍길동2014-12-12
3동해물과백두산이마르고닳도록하...홍길동2014-12-12



테이블의 td에 css를 주면 됨

 table tr td{text-overflow: ellipsis; white-space: nowrap; max-width: 140px;}

max-width는 최대길이로 해당 길이를 넘어가면 나머지 글자는 ...으로 처리됨.


조상님LOTTO - Google Play 앱

무료로 로또 당첨 확률을 높일 수 있습니다.

play.google.com

뽀모도로 타이머(Pomodoro Timer) - Google Play 앱

뽀모도로(Pomodoro)공부법은 단시간 집중력 향상을 위한 자기주도 학습법입니다.

play.google.com



 

반응형