css ie下多行省略 兼容ie

在 Internet Explorer (IE) 的老版本中，处理多行文本的省略（`overflow: ellipsis;`）并不直接支持。由于 IE6 至 IE9 并不完全支持 CSS3，我们需要采用一些技巧来实现多行文本的省略显示。

一种常见的解决方案是使用条件注释（Conditional Comments）结合 JavaScript 或 VBScript 来模拟。步骤如下：

1. **CSS**:

使用 `white-space: nowrap;` 阻止文本换行，然后设置 `text-overflow: ellipsis;` 表示超出内容的部分隐藏，并添加省略标记。这将在现代浏览器如 Chrome、Firefox 和 Safari 中生效，但在 IE 下不会起作用。

   .ie-ellipsis {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
   }

2. **JavaScript 或 VBScript（仅对 IE 版本）**:

利用 `document.body.createTextRange()` 创建文本范围，然后设置其 `scrollWidth` 和 `offsetWidth` 来确定文本长度，通过调整容器宽度来实现省略效果。

// JavaScript 示例
function addEllipsisToIE(elementId) {
  if (!window.document.all || !document.getElementById) return;
  var element = document.getElementById(elementId);
  if (!element) return;

  // 其他兼容性检查...

  var range = document.body.createTextRange();
  range.moveToElementText(element);
  range.collapse(true);

  var width = element.offsetWidth - 40; // 假设需要的省略符宽度是 40px
  element.style.width = width + 'px';

  var visibleChars = Math.min(range.scrollWidth, range.offsetWidth);
  if (visibleChars > width) {
    element.innerHTML += '...';
  }
}

// 调用函数，例如：
addEllipsisToIE('myElementId');