css로 제목 한줄에 쓰기 / 끝에 ... (말줄임표) 넣는 방법

안녕하세요 니노의 잡학로그 입니다.

오늘은 텍스트가 넘치면 말줄임표가 자동으로 붙게 해주는 css 코드를 포스팅해 볼게요.

아주 간단히 몇개의 코드만 넣어주면 됩니다.

 

하지만 자주 쓰지 않으면 자꾸 까먹어서 이렇게 적어둬야 할 코드입니다.

 

직접 만든 반응형 srt 메인 예시

위의 사진에서 표시한것 같이 글이 칸을 넘어 갔을때

말줄임표로 자동으로 나오게 하는 코드입니다.

 

선택자는 알맞게 적어주시고, 필요한 요소들은 아래와 같으니

너비 부분만 원하시는 크기에 맞게 적절히 수정해서 사용하시면 돼요. ^^

ul > li > a > .title {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

white-space : nowrap    -   글이 한줄에서 넘어가지 않게 해줌

text-overflow: ellipsis   -   글이 공간보다 긴 경우 ... 을 넣어줌

 

간단하지만 자주 안써서 기억이 나지 않으니

공식이라 생각하고 적어두고 사용합시다. :)