Bootstrap Table 中实现长文本的展开/收起功能

在开发Web应用时，我们经常需要处理表格中长文本的显示问题。Bootstrap Table作为一款流行的前端表格插件，提供了灵活的配置选项来优化用户体验。本文将详细介绍如何在Bootstrap Table中实现长文本的展开/收起功能。

基本实现方案

最直接的解决方案是使用CSS的text-overflow: ellipsis属性。这种方法简单有效，当文本超出容器宽度时会自动显示省略号。实现方式如下：

.table-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px; /* 根据实际需求调整 */
}

进阶交互方案

如果希望提供更友好的交互体验，可以结合JavaScript实现"更多/更少"的切换功能。以下是实现思路：

1. 为表格单元格设置初始高度限制
2. 检测文本是否溢出
3. 添加切换按钮
4. 实现展开/收起功能

function initExpandableCells() {
  $('.table-cell').each(function() {
    const $cell = $(this);
    if (this.scrollHeight > this.clientHeight) {
      $cell.append('<button class="expand-btn">更多...</button>');
    }
  });

  $(document).on('click', '.expand-btn', function() {
    const $cell = $(this).parent();
    $cell.toggleClass('expanded');
    $(this).text($cell.hasClass('expanded') ? '收起' : '更多...');
  });
}

样式优化建议

.table-cell {
  max-height: 60px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.table-cell.expanded {
  max-height: none;
}

.expand-btn {
  background: none;
  border: none;
  color: #007bff;
  cursor: pointer;
  padding: 0 5px;
}

最佳实践建议

1. 响应式考虑：在不同屏幕尺寸下调整最大宽度/高度
2. 性能优化：对于大型表格，考虑虚拟滚动技术
3. 可访问性：确保展开/收起按钮对屏幕阅读器友好
4. 用户体验：添加平滑的过渡动画效果

通过以上方法，开发者可以灵活地在Bootstrap Table中实现长文本的优雅展示，既保持了表格的整洁性，又提供了完整的文本查看功能。