css 게시판 제목 말줄임 처리 ellipsis

이번엔 게시판의 제목이나 글의 내용을 일부 보여줄 때 내용이 영역보다 더 길어서 

줄바꿈이 되거나 UI가 깨지지 않도록 css의 ellipsis를 사용하여 생략(...) 처리를 해보겠습니다.

 

한 줄 처리

기본 HTML

<style>
    .text_box{
    	box-sizing:border-box;
        width:400px;
        height: 30px;
        padding: 5px;
        font-size: 15px;
        border: 1px dotted #999999;
    }
    .text{
        width:100%;
        height:15px;    //글 한줄의 높이
    }
</style>
<div class="text_box">
    <div class="text">
    	말줄임 처리를 해봅시다. 
        말줄임 처리를 해봅시다. 
        말줄임 처리를 해봅시다. 
        말줄임 처리를 해봅시다. 
        말줄임 처리를 해봅시다. 
        말줄임 처리를 해봅시다. 
        말줄임 처리를 해봅시다.
    </div>
</div>

 

1. 아래는 가로폭 400px의 div에 내용을 길게 써놓았는데

박스의 사이즈보다 내용이 더 길기 때문에 줄바꿈이 이뤄져 보기 흉하게 되었습니다.

말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다.

 

 

 

2. 한줄 처리를 위해 줄바꿈 되는 내용을 한줄로 변경

- css white-space : 공백에 대한 처리를 하는 css 입니다. 여기선 줄 바꿈 없이 쭉 이어지게 해주는 nowrap을 쓰겠습니다.

.text{
    width:100%;
    height:15px;
    white-space:nowrap;
}

아래는 내용을 한줄로 처리한 결과 입니다.

말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다.

 

 

3. 넘어 가는 요소 감추기

- css overflow:hidden : 박스의 크기를 넘어서는 내용은 보이지 않게 됩니다.

.text{
    width:100%;
    height:15px;
    white-space:nowrap;
    overflow:hidden;  //내부의 text 클래스에 hidden 속성 추가
}

아래는 .text 클래스를 가진 박스에 overflow:hidden 속성을 추가해 박스 바깥으로 텍스트가 넘어 가지 않도록 수정했습니다.

말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다.

 

 

4. 텍스트를 생략(ellipsis) 처리

- css text-overflow:ellipsis : 내용이 박스의 크기를 넘어 갈 경우 ... 생략 표시합니다.

- ellipsis는 적용 하는 박스의 속성이 display: block의 상태여야 합니다.

.text{
    width:100%;
    height:15px;
    white-space:nowrap;
    overflow:hidden;  
    text-overflow: ellipsis; //ellipsis 속성 추가
}

아래는 .text 클래스를 가진 박스에 text-overflow: ellipsis 속성을 추가해 내용을 생략 처리한 결과입니다.

말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다. 말줄임 처리를 해봅시다.

 

이상이 게시글의 제목등을 표현할 때 가로폭이 좁은 디바이스에서 ui가 깨지지 않도록 설정하는 한 줄 처리 였습니다.