[CSS] 범위를 벗어나는 긴 문자열 자르기

CSS

spring92 2021. 8. 24. 03:26

api에서 불러온 title의 길이가 18자를 초과하면 18자까지만 남기고, 아니면 전체를 출력하는 코드를 짰다.

<Title>
    {title.length > 18 ? `${title.substring(0, 18)}...` : title}
</Title>

그런데 이렇게 자르면 중국어나 일본어에는 적용이 안되는 문제가 발생해서 CSS로 해결했다.

const Title = styled.span`
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;