CSS로 줄임말 표시하기

간단한 방법

...으로 표시하기 위해 아래와 같이 Element에 스타일을 적용하면 간단히 된다.

<a href="/qna/question/test">줄임표시할 텍스트</a>

a {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

부모 Element가 있을 경우

만약에 부모 Element도 가로의 길이가 같이 줄어든다면 아래와 같이 css를 하면 된다.

<div class="parent">
  <a href="/qna/question/test">줄임표시할 텍스트</a>
</div>

.parent {
    overflow:hidden;
}

a {
    display: block;
    text-overflow: ellipsis;
    overflow:hidden;
    white-space: nowrap;
}

여기서 부모 Element가 flex 스타일이 적용될 경우

flex 스타일 적용될 경우 nowrap으로 하면 가로의 크기는 줄어들지 않는다.

이렬경우 min-width=0으로 하면 가로의 길이는 줄어들고 줄림표 표시도 된다.

<div class="parent">
  <a href="/qna/question/test">줄임표시할 텍스트</a>
</div>

.parent {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
    overflow:hidden;
}

a {
    display: block;
    text-overflow: ellipsis;
    overflow:hidden;
    white-space: nowrap;
}