오버플로된 범위에 줄임표를 표시하려면 어떻게 해야 합니까?

오버플로된 범위에 줄임표 표시

숨겨진 오버플로가 있는 범위에 점("...")을 표시하려면 text-overflow: 줄임표 속성. 넘친 텍스트를 자르고 대신 줄임표를 표시합니다.

구현 방법은 다음과 같습니다.

<code class="css">span {
  display: inline-block;
  width: 180px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}</code>

이 스니펫에서:

• display: inline-block 범위가 블록과 유사하면서도 인라인 공간을 차지하도록 허용합니다.
• width: 180px는 범위의 너비를 180픽셀로 설정합니다.
• white-space: nowrap은 텍스트 줄 바꿈을 방지합니다.
• overflow: Hidden !important는 내용이 범위의 너비를 넘을 때 내용이 숨겨지도록 보장합니다.
• text-overflow: 줄임표는 텍스트를 자르고 내용이 넘칠 때 줄임표를 표시합니다. .

이러한 속성을 결합하면 범위에 줄임표를 표시하여 보기에서 숨겨진 콘텐츠가 더 있음을 나타낼 수 있습니다.

위 내용은 오버플로된 범위에 줄임표를 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!