CSS에서 여러 줄의 초과 부분을 타원으로 표시하는 방법

CSS에 여러 줄의 텍스트가 나타날 때, 초과된 부분을 제대로 표시하지 못하는 문제가 종종 발생합니다. 이때 우리는 이 문제를 해결하기 위해 타원을 사용할 수 있습니다.

구체적인 작업 방법은 다음과 같습니다.

1. 먼저 텍스트의 너비가 제한된 컨테이너를 설정해야 합니다. 예:

<div>
  这是一段需要进行多行省略号处理的文本内容
</div>

2. 그런 다음 너비를 포함하여 CSS에서 텍스트 컨테이너의 스타일을 설정합니다. , 글꼴 크기, 줄 높이 및 기타 속성:

.text-container {
  width: 300px;
  font-size: 16px;
  line-height: 1.5;
}

3. 다음으로 CSS의 text-overflow 속성을 통해 줄임표 효과를 얻을 수 있습니다. 이 속성에는 클립, 줄임표 및 문자열의 세 가지 값이 있습니다. 그 중 클립(clip)은 생략 부호를 표시하지 않는다는 의미이고, 스트링(string)은 지정된 문자열을 생략 부호로 표시한다는 의미이다. 여러 줄의 텍스트를 생략하는 경우 일반적으로 줄임표를 사용하여 값을 얻습니다. 동시에 컨테이너 너비를 초과한 후 텍스트가 자동으로 줄 바꿈되도록 공백을 일반 또는 일반 줄 바꿈으로 설정해야 합니다.

.text-container {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;  /* 控制行数 */
  -webkit-box-orient: vertical;
}

4. 위 코드에서는 -webkit-line-clamp 및 -webkit-box-orient 속성을 사용하여 텍스트 줄의 수와 방향도 제어합니다. 그 중 -webkit-line-clamp 속성을 사용하여 표시되는 텍스트 줄 수를 제어합니다. 이 예제에서는 최대 3줄까지 표시하도록 설정했습니다. -webkit-box-orient 속성은 유연한 상자의 하위 요소 배열을 정의하는 데 사용됩니다. 여기서는 수직 배열로 설정합니다.

이렇게 하면 CSS 여러 줄 줄임표 효과가 완성됩니다. 일반적으로 주목해야 할 중요한 점은 텍스트 컨테이너의 너비를 설정하고 적절한 선 수와 타원 스타일을 설정하는 것입니다. 동시에, 더 나은 결과를 얻으려면 text-overflow 속성을 사용하여 텍스트의 초과 부분에 대한 줄임표 스타일을 제어하십시오.

위 내용은 CSS에서 여러 줄의 초과 부분을 타원으로 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!