[css] box내에서 한줄(single line)으로 text를 짜르고 싶을 때 (feat. text-overflow)

text-overflow를 몰랐을 땐, 그냥 임의로 substring을 자르고 끝에 ...을 강제로 붙였다!..

text-overflow

위와 같은 형태로 엄청나게 긴 text를 끝에 잘라내고 싶은데, 거기다가 끝에 ...과 같이 표시할때 text-overflow를 씁니다.
중요한점은 width를 제한하고 overflow, white-space도 같이 써줘야한다는 것입니다. (text-overflow만 쓰면 적용안된다.)

<div className={styles.description}>
  <div className={styles.name}>{props.building.name}</div>
  <div className={styles.shopCount}>음식점 ({props.building.shops.length}개)</div>
  <div className={styles.shopNames}>{props.building.shops.join(', ')}</div>
</div>

.shopNames {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

2줄 이상에 적용할 때

만약 2줄이상을 적용하고 싶다면, 아래처럼 -webkit 관련 property를 추가해줍니다.
저는 아래와 같이 mixin으로 만들어서 사용합니다.

여기서 text-overflow는 필수값은 아닙니다. -webkit property가 되지 않는 경우를 대비해서(간혹 ...이 표시 되지 않는 이슈가 있다고 함) 넣어뒀을 뿐입니다. 실제로는 text-overflow가 없어도 ellipsis로 표시됩니다.

word-break는 white-space가 있는 경우가 아니더라도 줄바꿈을 하기위해서 추가하였습니다. 영어의 경우 break-all로 하지 않으면, white-space에서만 줄바뀜이 됩니다.

@mixin text-overflow-epllipsis($line-clamp: 3) {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.5em;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-line-clamp: $line-clamp;
  -webkit-box-orient: vertical;
}