text-overflow를 페이드 아웃으로 처리하기

게시글의 제목 등이 너무 길 때, text-overflow를 통해 디자인을 해치지 않도록 합니다.
이 때 clip이나 ellipsis 대신 페이드 아웃 처리를 하고 싶을 때가 있습니다.
CSS를 통해 이를 구현해봅니다.

1. mask-image

See the Pen text-overflow (1) by _______eungook (@_______eungook) on CodePen.

mask-image를 linear-gradient()로 씌워주는 것으로 간단히 구현할 수 있습니다.

2. <a> 태그인 경우

text-overflow를 위해서는 display: block이 필요합니다.
이 경우 <a> 태그는 text가 아닌 block 영역 전체가 클릭 가능한 영역이 되어 사용성에 문제가 생깁니다.

그래서 이를 위해 width: fit-content를 넣어주게 되는데, 부영향으로 mask-image의 width도 같이 짧아지게 됩니다.
그 결과 text-overflow와 무관한 페이드 아웃이 적용됩니다.

이 부분은 다시 mask-size를 max-width와 동일하게 적용하여 해결할 수 있습니다.

See the Pen text-overflow (2) by _______eungook (@_______eungook) on CodePen.

3. tailwind의 @utility로

위 내용을 tailwind의 @utility로 등록하면 다음과 같습니다.

/* 제목이 너무 긴 경우 페이드 아웃 효과 */

@utility post-truncate-* {
    @apply inline-block truncate text-clip;
    
    mask-image: linear-gradient(to right, black 90%, transparent);
    
    max-width: --value(--container-*);
    max-width: --value([number]);
    max-width: calc(--value(number) * 1rem);
    
    mask-size: --value(--container-*);
    mask-size: --value([number]);
    mask-size: calc(--value(number) * 1rem);
}

post-truncate-16, post-truncate-xl 같은 느낌으로 사용할 수 있습니다.