[css] 긴 텍스트 (...) 생략부호 표시하기 / 텍스트 줄이기

[CSS] 긴 텍스트 ... 생략부호 표시하기 / 텍스트 줄이기/ 텍스트 안보이게/ 텍스트 생략 / 텍스트 초과 / text-overflow:ellipsis /overflow:hidden / white-space:nowrap

 

 

 

 

 

1. display 변경

우선 텍스트를 담고 있는 span의 display는 inline입니다

inline은 텍스트 길이 만큼 너비가 지정되고 width와 height는 적용이 불가합니다.

이를 해결하기 위해 display를 block으로 변경합니다

후에 본인이 원하는 사이즈로 width와 height를 지정합니다

span {
    display:block;
    /* 가로길이  고정 */
    width: 30px;
}

 

저 파란 부분이 width 30px 입니다 

텍스트가 넘어간게 보이죠?

 

 

2. overflow:hidden 적용

이렇게 width의 크기에 텍스트가 초과하면 

텍스트를 안보이게 합니다

overflow:hidden 을 이용해주세요

overflow:hidden은 부모요소를 넘어가는 자식요소는 보이지 않게 하는 기능을 가졌습니다.

span {
    display:block;
    /* 가로길이  고정 */
    width: 30px;
    /* 초과영역 안보이게 */
     overflow:hidden; 
}

 

width 길이에 맞춰 박스를 넘어간 텍스트가 가려졌습니다.

 

 

3. text-overflow:ellipsis; 적용

이제 넘어간 텍스는 ...으로 지정을 해줄겁니다

text-overflow:ellipsis;를 지정해주세요

텍스트-넘어감: 생략부호...

이란 뜻입니다

span {
    display:block;
    /* 가로길이  고정 */
    width: 30px;
    /* 초과영역 안보이게 */
    overflow:hidden;
    /* 초과시 ... */
    text-overflow:ellipsis;
}

 

 

근데... 저렇게 여러줄의 첫단어 혹은 글자에 생략부호가 있으니 전혀 깔끔하지 않죠?

그럴때는 개행 처리를 없애고 깔끔하게 첫줄만 보이게 합니다

 

 

4. white-space:nowrap 적용

white-space:nowrap을 추가해주세요 

개행처리를 없애줍니다.

 

 

너무 극단적으로 줄여져서 width를 조금 늘려볼게요

 

완성!

 

 

 

 

전체코드입니다

span {
    display:block;
    /* 가로길이  고정 */
    width: 55px;
    /* 초과영역 안보이게 */
    overflow:hidden;
    /* 초과시 ... */
    text-overflow:ellipsis;    
    /* 개행 X */
    white-space:nowrap; 
}