How to use CSS to implement the display and hide function of folder names or description text?

CSS cleverly implements folder text display and hiding

How to gracefully handle the display of long text in a dynamically generated folder list to avoid affecting the page layout? This article provides a CSS-based solution to enable folder names or description text to be fully displayed when needed.

Requirements Analysis

Suppose we have a dynamically generated folder list with some folder names or description text being too long. By default, only single-line text is displayed, but what should be done when the user needs to view the full content?

CSS implementation solution

With CSS's :hover pseudo-class and text properties, we can easily implement this function. The following code shows the specific implementation:

<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="Folder icon">
  <span>Is this a beauty? I don’t know, but I found it from Baidu anyway. You can see if it’s a beauty yourself.</span>
</div>

.folder-item {
  width: 200px;
}

.folder-item img {
  display: block;
  width: 100%; /* Adjust the image width to adapt to the container*/
  max-height: 200px; /* Set the maximum height of the picture to prevent excessive height*/
  object-fit: cover; /* Keep the image proportions and fill the container*/
  margin-bottom: 8px;
}

.folder-item span {
  display: -webkit-box; /* Use flexbox or webkit-box to implement single-line display*/
  -webkit-line-clamp: 1; /* Show only one line*/
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.folder-item:hover span {
  display: block; /* display full text when hovering*/
  -webkit-line-clamp: unset; /* Cancel single line limit*/
}

Code interpretation

1. Basic style: .folder-item defines the width of the folder item; the picture style is adjusted to adapt to the container width, and the maximum height and object-fit attribute are set to ensure the image display effect.

2. Default single-line display: .folder-item span uses -webkit-box (or display: flex; ) and -webkit-line-clamp properties to restrict text to be displayed as single lines, and hides the excess with overflow: hidden .

3. Mouse hover effect: .folder-item:hover span When hovering, cancel -webkit-line-clamp limit to make the text fully displayed.

Through the above CSS code, you can realize the elegant display and hide function of folder names or description text, without modifying the HTML structure and keeping the page layout neat. Note that -webkit-line-clamp property is a private property. It is recommended to use it in conjunction with display: flex; or display: -webkit-box; to ensure compatibility.

The above is the detailed content of How to use CSS to implement the display and hide function of folder names or description text?. For more information, please follow other related articles on the PHP Chinese website!