CSS는 한 줄 텍스트 입력을 제한합니다. 초과 부분을 대체하려면...을 사용하세요.

실제 응용 프로그램에서는 텍스트 한 줄만 표시하고 텍스트 줄 바꿈으로 인해 전체 스타일이 손상되지 않도록 해야 하는 경우가 많습니다. 예를 들어 '제품명', '소개' 등이 있습니다. 다만, 모니터의 폭이 다르기 때문에 배경에 제공되는 텍스트 내용을 한 줄의 텍스트에 담지 못하는 경우가 있을 수 있습니다. Overflow:hidden을 사용하여 오버플로 텍스트를 갑자기 숨기면 표시 효과가 그다지 좋지 않습니다. 이때 오버플로 텍스트를 줄임표로 바꿔야 합니다... js를 사용하여 가로채는 것은 약간 복잡합니다. CSS 속성을 직접 사용하여 이 효과를 얻을 수 있습니다.

텍스트 객체에 추가해야 하는 CSS 속성은 다음과 같습니다.

캐주얼 솔리드 컬러 활용도 높은 반바지

.className{너비: 60px;오버플로: 숨겨진;공백 공간: nowrap;텍스트-오버플로: 줄임표;}

표시되는 효과는 다음과 같습니다.