JavaScript 实现文章标题在过长时显示省略号，鼠标悬浮时展示全部内容

需求：文章的标题过长时，标题的前后两端可正常展示，中间部分用省略号…表示，并且鼠标悬停时，展示全部内容。

实现思路：

获取文章标题元素。
检查标题的宽度是否超出容器的宽度，如果超出，则进行截断，并在超出部分使用省略号。
添加鼠标悬停事件监听器，当鼠标悬停在标题上时，显示完整标题。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章标题处理</title>
<style>
  .article-title {
    max-width: 300px; /* 设置标题容器的最大宽度 */
    cursor: pointer;
  }
</style>
</head>
<body>

<h1 class="article-title" title="这是一个非常长的文章标题，超过了容器的宽度">这是一个非常长的文章标题，超过了容器的宽度</h1>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var titleElement = document.querySelector('.article-title');
  var maxChars = 10; // 设置最大字符数，超过这个数就开始截断
  
  // 获取标题文本
  var titleText = titleElement.textContent;
  
  // 检查标题是否超出最大字符数
  if (titleText.length > maxChars) {
    // 截取标题的前半部分
    var firstHalf = titleText.slice(0, Math.floor(maxChars / 2));
    
    // 截取标题的后半部分
    var secondHalf = titleText.slice(-Math.floor(maxChars / 2));
    
    // 拼接截取后的标题文本，并添加省略号
    var truncatedText = firstHalf + '...' + secondHalf;
    
    // 更新标题元素的文本内容
    titleElement.textContent = truncatedText;
  }
  
  // 添加鼠标悬停事件监听器
  titleElement.addEventListener('mouseover', function() {
    // 显示完整标题
    this.textContent = titleText;
  });

  // 添加鼠标移出事件监听器
  titleElement.addEventListener('mouseout', function() {
    // 恢复截断并显示省略号
    this.textContent = truncatedText;
  });
});
</script>

</body>
</html>

示例效果：

上述示例中，.article-title 类被应用于标题元素，用来设置标题的样式。在 JavaScript 部分，通过监听 mouseover 事件和 mouseout 事件来实现鼠标悬停时显示完整标题，移出时恢复截断并显示省略号的效果。

相关文章：

本文标签: