[CSS] 텍스트 말줄임표 (...) 자동으로 사용하기

텍스트가 지정된 너비보다 길때 말줄임표(...)을 쓰고 싶을 때가 있다.

이 때 핵심이 되는 CSS는 text-overflow, overflow, white-space를 아래처럼 지정해주는 것이다.

주의할 것은 width가 별도의 값을 가지고 있어야 한다. 만약 별도의 값을 지정해주기 어렵다면 아래처럼 -webkit-fill-available을 사용하는 것도 좋다.

import * as React from "react";
import styled from "@emotion/styled";

const TableCell = styled.div`
  display: block;
  width: -webkit-fill-available;
  padding-left: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  &.left-aligned {
    justify-self: flex-start;
  }
  &.center-aligned {
    width: auto;
    justify-self: center;
  }
  &.right-aligned {
    width: auto;
    justify-self: flex-end;
  }
  &.clickable {
    cursor: pointer;
  }
  &.padding-right {
    padding-right: 20px;
  }
`;