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

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;
`;

아무 것도 적용하지 않은 상태

display: block

white-space: nowrap

overflow: hidden

text-over-flow: ellipsis