(1) 한줄처리 방법
IE7부터 IE11까지, 크롬, 사파리, 파이어폭스 모두 말줄임(…) 표시 된다.KOSPI가 3거래일 연속 상승세를 이어가며 2,100선 회복을 목전에 두고 있다. 지난주 사드(THAAD)배치와 관련된 중국의 보복 제제(한국 여행상품 판매 중단 등) 강화로 KOSPI의 변동성이 확대되며 주 초반 장중 한때 2,060선까지 되밀렸으나, 빠르게 안정을 찾는 모습이다. 외국인 투자자들이 3거래일 연속 순매수에 나서며 지수상승을 견인하였다. 다만, KOSDAQ 시장은 소폭 약세를 보이며 3거래일 만에 하락 마감하였다.
- white-space:nowrap (줄바꿈안되게)
- overflow:hidden (글자가 넘치는것을 자름)
- text-overflow:ellipsis (…처리로 만들어줌)
1 | .short_txt01 {font-size:1em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} |
(2) 두줄처리 방법
IE, 파이어폭스는 말줄임(…) 표시가 안된다. 크롬, 사파리는 말줄임(…)표시 됨모바일만 고려했을때는 말줄임(…) 처리가 모두 가능하지 않을까 생각한다.
KOSPI가 3거래일 연속 상승세를 이어가며 2,100선 회복을 목전에 두고 있다. 지난주 사드(THAAD)배치와 관련된 중국의 보복 제제(한국 여행상품 판매 중단 등) 강화로 KOSPI의 변동성이 확대되며 주 초반 장중 한때 2,060선까지 되밀렸으나, 빠르게 안정을 찾는 모습이다. 외국인 투자자들이 3거래일 연속 순매수에 나서며 지수상승을 견인하였다. 다만, KOSDAQ 시장은 소폭 약세를 보이며 3거래일 만에 하락 마감하였다.
- white-space:nowrap 해제 (줄바꿈이되야하니 해제해야한다)
- line-height (줄높이를 준다)
- height (2줄을 보여주고싶다면 line-height의 2배, 3줄은 3배로 설정)
- word-wrap: break-word (잘라버릴 글자를 단어 단위로 만들어준다)
- display:-webkit-box (플렉스 박스형태로 변환)
- -webkit-line-clamp:3 (보여줄 줄 갯수)
- -webkit-box-orient:vertical (플렉스 박스의 방향 설정)
1 2 3 4 | .short_txt02 { font-size:1em;overflow:hidden;text-overflow:ellipsis;line-height:1.5;height:3em; word-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical } |