[CSS] 말줄임

말줄임 한줄 적용하기

p {
    width : 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}

1. 얼마의 너비를 넘어갔을 경우 말줄임을 사용할건지 width를 지정해주어야합니다.
2. white-space: nowrap을 사용해 자동줄 바꿈을 없앱니다.
3. text-overflow: ellipsis를 사용하면 글자가 특정 범위를 벗어나면 말줄임표 처리를 해줍니다.
4. text-overflow를 사용하기 위해선 overflow를 지정해야하는데 overflow : hidden를 적용해줍니다.

말줄임 여러줄 적용하기

p {
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

1. 한줄 적용할 때와 마찬가지로 width, text-overflow, overflow를 설정해줍니다.
2. webkit-line-clamp로 원하는 최대 라인수를 지정해줍니다.
3. webkit 속성을 사용하기 위해서 display: -webkit-box를 설정해주고, 수직으로 정렬하기 위해 -webkit-box-orient: vertical을 추가합니다.
4. word-wrap는 박스의 가로 영역을 넘친 단어 내에서 임의의 분리 여부를 결정합니다. break-word는 긴 단어를 분리해서 줄바꿈해줍니다.

참고자료

• [css] 한 줄, 여러 줄 말줄임
• [HTML/CSS] 말줄임 표시 하는 방법: 1줄, 2줄 예제