CSS를 사용하여 디스플레이를 구현하고 폴더 이름 또는 설명 텍스트의 기능을 숨기는 방법은 무엇입니까?

CSS는 폴더 텍스트 디스플레이 및 숨어를 영리하게 구현합니다

페이지 레이아웃에 영향을 미치지 않도록 동적으로 생성 된 폴더 목록에서 긴 텍스트 표시를 우아하게 처리하는 방법은 무엇입니까? 이 기사는 필요할 때 폴더 이름 또는 설명 텍스트를 완전히 표시 할 수있는 CSS 기반 솔루션을 제공합니다.

요구 사항 분석

폴더 이름이나 설명 텍스트가 너무 길어 동적으로 생성 된 폴더 목록이 있다고 가정 해 봅시다. 기본적으로 단일 라인 텍스트 만 표시되지만 사용자가 전체 컨텐츠를보아야 할 때 어떻게해야합니까?

CSS 구현 솔루션

CSS :hover 의사 클래스 및 텍스트 속성을 사용하면이 기능을 쉽게 구현할 수 있습니다. 다음 코드는 특정 구현을 보여줍니다.

<div class="folder-item">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174286777590538.jpg" class="lazy" alt="폴더 아이콘">
  <span>이것은 아름다움입니까? 잘 모르겠지만 어쨌든 바이두에서 찾았습니다. 당신은 그것이 아름다움인지 확인할 수 있습니다.</span>
</div>

.folder-item {
  너비 : 200px;
}

.folder-item img {
  디스플레이 : 블록;
  너비 : 100%; /* 컨테이너에 적응하도록 이미지 너비를 조정*/
  최대 높이 : 200px; /* 과도한 높이를 방지하기 위해 그림의 최대 높이를 설정*/
  객체 적합 : 덮개; /* 이미지 비율을 유지하고 컨테이너를 채우십시오*/
  마진 바닥 : 8px;
}

.folder-item span {
  디스플레이 : -webkit -box; /* Flexbox 또는 WebKit-Box를 사용하여 단일 라인 디스플레이를 구현하십시오*/
  -webkit-line-clamp : 1; /* 한 줄만 표시*/
  -webkit-box-orient : 수직;
  오버플로 : 숨겨진;
}

.folder-item : 호버 스팬 {
  디스플레이 : 블록; /* 호버링시 전체 텍스트 표시*/
  -webkit-line-clamp : unset; /* 한 줄 제한 취소*/
}

코드 해석

1. 기본 스타일 : .folder-item 폴더 항목의 너비를 정의합니다. 사진 스타일은 컨테이너 너비에 적응하도록 조정되며 최대 높이 및 object-fit 속성은 이미지 표시 효과를 보장하도록 설정됩니다.

2. 기본 단일 라인 디스플레이 : .folder-item span -webkit-box (또는 display: flex; ) 및 -webkit-line-clamp 속성을 사용하여 텍스트를 단일 줄로 표시 할 텍스트를 제한하고 과잉을 overflow: hidden 로로 숨 깁니다.

3. 마우스 호버 효과 : .folder-item:hover span 호버링시 -webkit-line-clamp 한계를 취소하여 텍스트를 완전히 표시하도록합니다.

위의 CSS 코드를 통해 HTML 구조를 수정하고 페이지 레이아웃을 깔끔하게 유지하지 않고 폴더 이름 또는 설명 텍스트의 우아한 디스플레이 및 숨기기 기능을 실현할 수 있습니다. -webkit-line-clamp 속성은 사유지입니다. display: flex; 또는 display: -webkit-box; 호환성을 보장합니다.

위 내용은 CSS를 사용하여 디스플레이를 구현하고 폴더 이름 또는 설명 텍스트의 기능을 숨기는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!