text-overflow 한줄, 두줄, 여러줄 자르기

프로필

2017. 9. 26. 14:56

이웃추가
한 줄 글자 ... 자르기 처리

한줄 ... 처리 자르기는 overflow와 text-overflow로 간단하게 처리
white-space:nowrap; 을 통해 한줄로만 처리 후 오버플로우를 처리하자.

.one-line{
    display:inline-block;
    width:200px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.one-line{display:inline-block;width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
두줄, 여러줄 자르기

두줄, 여러줄 자르기는 display:-webkit-box; 로 처리후에 -webkit-line-clamp:3; 으로 처리
여기서 처리할 줄라인을 입력, -webkit-box-orient:vertical; 로 box를 세로 정렬

.two-line{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    width:200px;
    height:40px;
    line-height:20px;
    overflow:hidden;
    text-overflow:ellipsis;
}

.two-line{display:-webkit-box;width:200px;height:40px;line-height:20px;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
아스라히
아스라히 IT·컴퓨터

아슬아슬할 만큼 높거나 까마득하게.. 먼 곳에서 들려오는 소리가 희미하게..