CSS 텍스트를 오버플로하고 숨기는 방법

웹사이트의 성장과 발전에 따라 우리는 점점 더 많은 텍스트 표시와 레이아웃이 필요합니다. 이 과정에서 텍스트 내용의 길이는 점점 제어하기 어려워지고, 심지어 컨테이너의 경계를 초과하여 페이지 레이아웃이 혼란스러워질 수도 있습니다. 이 문제를 해결하기 위해 CSS의 텍스트 오버플로 숨겨진 속성을 사용하여 텍스트 표시 범위를 제어할 수 있습니다. 이 문서에서는 CSS 텍스트 오버플로 숨겨진 속성에 대한 자세한 소개와 적용을 제공합니다.

1. CSS 텍스트 오버플로 숨겨진 속성

CSS 텍스트 오버플로 숨겨진 속성은 컨테이너의 텍스트 내용이 컨테이너의 범위를 초과할 때 초과 부분을 처리하는 방법을 제어하는 ​​데 도움이 됩니다. . CSS의 text-overflow 속성을 사용하여 텍스트 오버플로를 숨길 수 있습니다.

text-overflow의 속성값은 다음과 같습니다.

1. clip: 텍스트가 컨테이너의 범위를 벗어나면 잘려 표시되지 않습니다.
2. 줄임표: 텍스트 끝에 줄임표(…)를 추가합니다.
3. string: 텍스트가 넘칠 때 표시 스타일로 문자열을 지정합니다. 줄임표 스타일을 사용자 정의할 수 있습니다.

2. text-overflow를 사용하여 텍스트 오버플로를 숨깁니다.

다음은 text-overflow 속성을 사용하여 텍스트 오버플로를 숨기는 예입니다.

HTML 코드:

<div class="container">
  <p>
    我们的使命是将人民群众的利益放在第一位，通过改革开放不断推进中国特色社会主义事业。
  </p>
</div>

CSS 코드:

.container {
  width: 300px;
  height: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

파싱:

1. 컨테이너 너비는 300픽셀, 높이는 50픽셀입니다. 텍스트 내용이 컨테이너의 경계를 초과하면 숨겨집니다.
2. overflow:hidden 속성은 컨테이너 내의 오버플로 부분이 잘려 페이지에 표시되지 않도록 지정합니다. 이 속성은 스크롤 막대가 텍스트 내부에 나타나지 않도록 합니다.
3. white-space:nowrap 속성은 텍스트 줄 바꿈이 허용되지 않음을 지정합니다. 이는 매우 중요합니다. 텍스트에서 줄 바꿈을 허용하는 경우 텍스트의 표시 범위를 제어할 수 있는 방법이 없습니다.
4. text-overflow:ellipsis 속성은 텍스트가 컨테이너 범위를 초과할 때 텍스트 끝에 줄임표(…)가 표시되도록 지정합니다.

실행 결과:

그림과 같이 텍스트 길이가 컨테이너 범위를 초과하고 끝에 줄임표가 표시됩니다.

3. 텍스트 오버플로를 사용하여 줄임표 스타일을 맞춤설정하세요

실제 사용에서는 줄임표 스타일을 맞춤설정해야 할 수도 있습니다.

HTML 코드:

<div class="container">
  <p class="text">
  我们的使命是将人民群众的利益放在第一位，通过改革开放不断推进中国特色社会主义事业。
  </p>
</div>

CSS 코드:

.container {
  width: 300px;
  height: 50px;
  overflow: hidden;
}

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text::after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 2px;
  background-color: #fff;
  color: #999;
}

파싱:

1. 텍스트 클래스 스타일에서 공백:nowrap 속성과 text-overflow:ellipsis 속성의 조합을 사용하여 방법을 지정합니다. 텍스트가 표시됩니다. Overflow:hidden은 텍스트의 오버플로 부분이 잘려서 페이지에 표시되지 않도록 하는 데 사용됩니다.
2. 텍스트 클래스 스타일의 ::after 의사 요소는 텍스트 끝에 접미사 '...'를 추가하고 이 접미사의 위치와 스타일을 지정합니다.

실행 결과:

그림과 같이 텍스트 끝에 사용자 정의 줄임표 스타일이 표시됩니다.

요약:

이 기사의 소개 및 예제 작업을 통해 text-overflow 속성을 사용하여 텍스트 오버플로 숨기기를 구현하고 동시에 텍스트 표시 범위가 컨테이너 경계를 초과하지 않도록 할 수 있습니다. 시간이 지나면 줄임표 스타일을 사용자 정의하여 페이지를 더욱 아름답고 표준화할 수도 있습니다. 이 속성을 숙지하는 한 우리는 조판을 더욱 세련되고 전문적으로 만들 수 있습니다.

위 내용은 CSS 텍스트를 오버플로하고 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!