查找页面内容方法document.body.createTextRange(),兼容火狐,ie的写法

博客可能围绕火狐和IE浏览器在页面查找、检索方面的相关内容展开,但具体细节因内容缺失暂不明确。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在 Internet Explorer (IE) 的老版本中,处理多行文本的省略(`overflow: ellipsis;`)并不直接支持。由于 IE6 至 IE9 并不完全支持 CSS3,我们需要采用一些技巧来实现多行文本的省略显示。 一种常见的解决方案是使用条件注释(Conditional Comments)结合 JavaScript 或 VBScript 来模拟。步骤如下: 1. **CSS**: 使用 `white-space: nowrap;` 阻止文本换行,然后设置 `text-overflow: ellipsis;` 表示超出内容的部分隐藏,并添加省略标记。这将在现代浏览器如 Chrome、Firefox 和 Safari 中生效,但在 IE 下不会起作用。 ```css .ie-ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } ``` 2. **JavaScript 或 VBScript(仅对 IE 版本)**: 利用 `document.body.createTextRange()` 创建文本范围,然后设置其 `scrollWidth` 和 `offsetWidth` 来确定文本长度,通过调整容器宽度来实现省略效果。 ```javascript // 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'); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值