html+css实现文字折叠特效实例

当前位置：电视猫 > HTML/Xhtml>

电视猫时间： 2024-07-14 07:57:36

　　html+css实现文字折叠特效实例

Sure, here are two examples of how to achieve text folding effects using HTML and CSS:

1. Using CSS text-overflow and white-space properties:

This method is suitable for simple text folding, where you want to hide a portion of the text and show an ellipsis (...) to indicate that there is more.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Folding with CSS</title>
  <style>
    .folded-text {
      display: -webkit-box; /* For compatibility with older browsers */
      -webkit-line-clamp: 2; /* Set the number of lines to show */
      -webkit-box-orient: vertical; /* Arrange lines vertically */
      overflow: hidden; /* Hide excess text */
      white-space: nowrap; /* Prevent text from wrapping */
      text-overflow: ellipsis; /* Add ellipsis to indicate more text */
    }
  </style>
</head>
<body>
  <p class="folded-text">This is a paragraph with a lot of text that will be folded into two lines using CSS. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Explanation:

HTML: The paragraph element has a class folded-text that applies the CSS styles.
CSS:
- display: -webkit-box and -webkit-line-clamp: These properties are used for compatibility with older browsers. Modern browsers use display: flex and max-lines instead.
- -webkit-box-orient: vertical: This property ensures that the lines are stacked vertically.
- overflow: hidden: This property hides any text that exceeds the specified number of lines.
- white-space: nowrap: This property prevents the text from wrapping to the next line, ensuring that it fits within the given width.
- text-overflow: ellipsis: This property adds an ellipsis (...) to indicate that there is more text hidden.

2. Using JavaScript to create a custom folding component:

This method offers more flexibility and control over the folding behavior, allowing you to dynamically adjust the number of lines based on available space or other criteria.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Folding with JavaScript</title>
  <style>
    .folded-text {
      white-space: nowrap;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <p class="folded-text" id="myText">This is a paragraph with a lot of text that will be folded using JavaScript. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <script>
    const textElement = document.getElementById('myText');
    const maxHeight = 50; // Set the maximum height for the folded text

    function foldText() {
      const lines = textElement.offsetHeight / textElement.lineHeight;
      if (lines > maxHeight) {
        const numLines = Math.floor(maxHeight / textElement.lineHeight);
        textElement.style.maxHeight = maxHeight + 'px';
        textElement.textContent = textElement.textContent.slice(0, numLines * textElement.dataset.charLength) + '...';