타원 너머에 CSS를 표시하는 방법

웹 디자인에서는 텍스트 내용이 너무 긴 상황에 자주 직면합니다. 이때 인터페이스 레이아웃이 늘어나 사용자 경험에 영향을 미치지 않도록 특정 길이를 초과하는 텍스트 내용을 생략하고 표시해야 합니다. CSS는 개발자가 이 기능을 구현하는 데 도움이 될 수 있는 줄임표 속성 외에 편리한 표시를 제공합니다.

CSS에서는 텍스트 오버플로를 통해 줄임표 너머의 표시가 이루어집니다. 텍스트 조각이 해당 컨테이너의 크기를 초과하는 경우 text-overflow 속성을 설정하여 줄임표(...)로 초과 텍스트를 표시할 수 있습니다. 일반적으로 다음 세 가지 속성을 지정해야 합니다.

1. white-space 속성: 요소 내의 공백을 처리하는 방법을 제어합니다. 값을 nowrap로 설정할 수 있습니다. 즉, 텍스트가 줄 바꿈 없이 강제로 표시됩니다. 왜냐하면 타원은 일반적으로 선의 끝에 나타나기 때문입니다.
2. overflow 속성: 요소 상자를 오버플로할 때 요소 내용이 표시되는 방식을 제어합니다. 컨테이너의 텍스트가 컨테이너 크기를 초과하는 경우에만 표시를 생략해야 하기 때문에 값을 숨김 또는 스크롤로 설정할 수 있습니다. .
3. text-overflow 속성: 텍스트가 컨테이너를 초과한 후 표시되는 방식을 나타냅니다. 값을 줄임표(...)를 사용한다는 의미로 설정할 수 있습니다.

예:

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

이 CSS 코드는 컨테이너 클래스 .container를 정의합니다. 컨테이너의 텍스트 콘텐츠가 컨테이너 크기를 초과하면 줄임표(...)로 표시됩니다. 동시에 공백 속성이 nowrap으로 설정되어 있으므로 텍스트가 줄 바꿈되지 않습니다.

줄임표 너머의 표시는 블록 수준 요소와 div, p,span 등과 같은 인라인 요소와 같은 일부 특정 요소에만 효과적이라는 점에 유의해야 합니다. 입력 상자 및 버튼과 같은 요소의 경우 유사한 효과를 얻으려면 특정 속성을 설정해야 합니다.

실제 개발에서는 다양한 브라우저와 호환되도록 다음 두 가지 방법을 동시에 사용하여 줄임표를 넘어서 표시하는 것이 좋습니다.

1. Use text-overflow:ellipsis; orient: 수직; -webkit-line-clamp:n; WebKit 핵심 -webkit-line-clamp의 CSS 확장 속성과 결합하여 구현됩니다. 여기서 n은 지정된 행 수입니다. 예:

.container {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

이 CSS 코드는 텍스트 내용을 두 줄로 제한하고 초과 내용은 줄임표(...)로 표시됩니다. -webkit-line-clamp 속성은 WebKit 코어가 있는 브라우저(예: Chrome, Safari 등)에만 유효하며 다른 브라우저의 경우 다른 속성을 사용해야 합니다.

2. 이를 달성하려면 컨텐츠 속성과 결합된 :before 또는 :after 의사 요소를 사용하세요. 예:

.container {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.container:after {
  content: "...";
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: 0;
  background-color: #fff;
}

이 CSS 코드는 의사 요소 after를 사용하여 배경색이 흰색인 요소를 추가한 다음 콘텐츠 "..."와 함께 content 속성을 사용하여 줄임표 효과를 얻습니다. 의사 요소와 컨테이너의 상대적인 위치를 유지하려면 컨테이너 클래스의 위치 속성을 상대적으로 설정해야 한다는 점에 유의해야 합니다.

간단히 말하면 CSS는 줄임표 표시를 넘어서 인터페이스의 미학과 사용자 경험을 향상시킬 수 있는 고전적인 디자인 기법입니다. 실제 개발에서는 구체적인 상황에 따라 적절한 방법을 선택하고 호환성 테스트를 수행하여 달성된 효과가 기대에 부합하는지 확인해야 합니다.

위 내용은 타원 너머에 CSS를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!