CSS Text

텍스트에 관련된 CSS 팁들을 모아본다.

넓이가 지정된 영역의 경우 텍스트 길이를 CSS로 제한할 수 있다. 서버사이드에서 자르는 방식은 가변폭 글꼴 때문에 정확하게 작동할 수 없다.

/* 넓이가 명시된 상태 */
width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;

• -webkit-line-clamp를 크로스 브라우저로 구현하기
• Opera에는 더 좋은 -o-ellipsis-lastline가 있다

/* WebKit */
.giveMeEllipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    -webkit-box-orient: vertical;
}
 
/* Cross Browser 3줄일 경우.*/
    p {
        position:relative;
        line-height:1.4em;
        height:4.2em;      /* 3 times the line-height to show 3 lines */
    }
    p::after {
        content:"...";
        font-weight:bold;
        position:absolute;
        bottom:0;
        right:0;
        padding:0 20px 1px 45px;
        background:url(ellipsis_bg.png) repeat-y;
    }

• break-all : 특수문자를 제외하고 강제 줄바꿈
• break-word : 특수문자를 포함하고 강제 줄바꿈. break-word을 사용하면 대부분의 경우 해결 될 듯.
• nowrap : width를 지정하였지만 개행이 되지 않기를 원할때 사용.
• keep-all : 텍스트가 한글일 경우 띄워쓰기 기준으로 개행된다.