[CSS3] 글자 길이 ... 방식으로 보여주기

안녕하세요.

이번에는 CSS에서 글자가 칸을 넘어갈 때 ... 으로 보이는 방법에 대해서 알아보겠습니다.

 

 

앞에 tbody > tr 이거는 사용하던 코드를 가져온 거라서 있는 것이므로 신경 쓰지 않으셔도 됩니다.

 

css 작성할 때 overflow, text-overflow, white-space 등 작성을 해주면 되는데,

이때, width 값도 필요합니다.

/* 노래 제목 */
tbody > tr > td:nth-child(4) > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 300px;
    width: 100%;
}

 

결과

 

참고 사이트

https://nh0404.tistory.com/43

https://blog.dalso.org/article/html-css-%EA%B8%80%EC%9E%90%EC%88%98%EA%B0%80-%EB%84%88%EB%AC%B4%EA%B8%B8%EB%95%8C-%EC%9C%BC%EB%A1%9C-%ED%91%9C%EC%8B%9C%ED%95%98%EA%B8%B0

 

감사합니다.