div {
    width: 200px;
    border: 2px solid red;

    /* 줄바꿈하지 않고 말줄임을 표시하는 
       방법에 필요한 CSS 속성들 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
<div>
    텍스트가 콘텐츠 박스의 끝에 도달했을 때
    자동으로 줄바꿈하지 않고
    오버플로우되는 텍스트는 숨기고
    생략 부호(...)를 표시하는
    방법에 대해 알아봅니다.
</div>
실제 적용된 모습
div {
    width: 200px;
    border: 2px solid red;
}
<div>
    text-overflow 속성은 텍스트 영역을 벗어나
    오버플로우되어 숨겨진 텍스트가 있는지를
    시각적으로 나타내는 생략 부호를 표시할지
    아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.
</div>
실제 적용된 모습
<div style="white-space: nowrap;">
    text-overflow 속성은 텍스트 영역을 벗어나
    오버플로우되어 숨겨진 텍스트가 있는지를
    시각적으로 나타내는 생략 부호를 표시할지
    아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.
</div>
실제 적용된 모습
<div style="white-space: nowrap; overflow: hidden;">
    text-overflow 속성은 텍스트 영역을 벗어나
    오버플로우되어 숨겨진 텍스트가 있는지를
    시각적으로 나타내는 생략 부호를 표시할지
    아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.
</div>
실제 적용된 모습
<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
    text-overflow 속성은 텍스트 영역을 벗어나
    오버플로우되어 숨겨진 텍스트가 있는지를
    시각적으로 나타내는 생략 부호를 표시할지
    아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.
</div>
실제 적용된 모습
selector {
    text-overflow: clip 또는 ellipsis
}
/* 키워드 값 */
text-overflow: clip;
text-overflow: ellipsis;

/* 글로벌 값 */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
text-overflow 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
text-overflow 1 12 7 1.3

caniuse.com에서 더 자세한 정보를 확인해 보세요.