/**
* 计算textOverflow样式需要选择的字符
* @private
*
* @param {Element} el Element对象
* @param {Number} width 容器宽度
* @param {Boolean} ellipsis 是否一定要出现省略号
*/
_count: function (el, width, ellipsis) {
/* 计算cache的名称 */
var o = E.get(el), fontWeight = o.fontWeight, cacheName =
'font-family:' + o.fontFamily + ';font-size:' + o.fontSize
+ ';word-spacing:' + o.wordSpacing + ';font-weight:' + (fontWeight.number() == 401 ? 700 : fontWeight)
+ ';font-style:' + o.fontStyle + ';font-variant:' + o.fontVariant,
cache = E.Cache[cacheName];
if (!cache) {
o = E.appendTo(E._eEmpty, el);
E.set(o, 'float:left;' + cacheName);
cache = E.Cache[cacheName] = [];
/* 计算ASCII字符的宽度cache */
for (i = 0; i < 256; i++) {
i == 32 ? (o.innerHTML = ' ') : E.setText(o, String.fromCharCode(i));
cache[i] = o.offsetWidth;
}
/* 计算非ASCII字符的宽度、字符间距、省略号的宽度 */
E.setText(o, '一');
cache[256] = o.offsetWidth;
E.setText(o, '一一');
cache[257] = o.offsetWidth - cache[256] * 2;
cache[258] = cache['.'.charCodeAt(0)] * 3 + cache[257] * 3;
E.set(o, '');
o.innerHTML = '';
E.appendTo(o);
}
for (
/* wordWidth是每个字符或子节点计算之前的宽度序列 */
var node = el.firstChild, charWidth = cache[256], wordSpacing = cache[257], ellipsisWidth = cache[258],
wordWidth = [], ellipsis = ellipsis ? ellipsisWidth : 0;
node;
node = node.nextSibling
) {
if (width < ellipsis) {
E.appendTo(node);
}
else if (node.nodeType == 3) {
for (var i = 0, text = node.nodeValue, length = text.length; i < length; i++) {
o = text.charCodeAt(i);
/* 计算增加字符后剩余的长度 */
wordWidth.push([width, node, i]);
width -= (i ? wordSpacing : 0) + (o < 256 ? cache[o] : charWidth);
if (width < ellipsis) {
break;
}
}
}
else {
o = node.tagName;
if (o == 'IMG' || o == 'TABLE') {
/* 特殊元素直接删除 */
o = node;
node = node.previousSibling;
E.appendTo(o);
}
else {
wordWidth.push([width, node]);
width -= node.offsetWidth;
}
}
}
if (width < ellipsis) {
/* 过滤直到能得到大于省略号宽度的位置 */
while (o = wordWidth.pop()) {
width = o[0];
node = o[1];
o = o[2];
if (node.nodeType == 3) {
if (width >= ellipsisWidth) {
node.nodeValue = node.nodeValue.substring(0, o) + '...';
return true;
}
else if (!o) {
E.appendTo(node);
}
}
else if (E._count(node, width, true)) {
return true;
}
else {
E.appendTo(node);
}
}
/* 能显示的宽度小于省略号的宽度,直接不显示 */
el.innerHTML = '';
}
}
分享到:
相关推荐
在Firefox中,由于其对`text-overflow`的支持略有不同,可能需要额外的技巧来实现预期效果。以下是几个解决Firefox下文本溢出问题的方法: 1. 使用`-moz-binding`:Firefox支持一个非标准的`-moz-binding`属性,...
例如,对于多行文本的省略,Firefox支持CSS3的`-moz-line-clamp`属性,而其他浏览器可能需要使用伪元素和绝对定位来模拟这个效果。 在提供的文件列表中,`test.htm`可能是一个包含上述CSS样式的HTML文件,而`...
本文将探讨如何在不同场景下实现多行文本溢出显示省略号的效果。 首先,对于基于WebKit的浏览器(如Safari和Chrome,以及大部分移动端浏览器),我们可以利用WebKit的私有属性`-webkit-line-clamp`。这是一个不受...
对于多行文本的复杂截断需求,可以使用CSS伪元素`:after`来模拟截断效果,通过`linear-gradient`创建渐变背景来模拟省略号。但这通常会导致一些问题,比如在中文环境下表现不稳定。 ### 问题与局限性 尽管`-webkit...
`li a`元素的样式中包含了`overflow: hidden`、`white-space: nowrap`和`text-overflow: ellipsis`,而在Firefox兼容性部分,通过`max-width`、`float`和`:after`伪元素实现了省略号效果。 通过这种方式,可以确保...
【纯 CSS 实现多行文字截断功能】 在前端开发中,尤其是在响应式设计中,有时我们需要对标题或内容进行多行文字截断,以适应不同的...同时,可以结合 JavaScript 动态调整样式,以在更多场景下实现多行文字截断效果。
`text-overflow`、`white-space` 和 `overflow` 属性组合使用,就可以实现这种效果,即“超过宽度的文字显示点点”。下面我们将深入探讨这三个属性及其相互作用。 首先,`text-overflow` 属性是用来控制当文本溢出...
在CSS中,我们可以使用`text-overflow`属性配合`white-space`和`overflow`属性来实现单行文本溢出时显示省略号的效果。具体代码如下: ```css .single-line-ellipsis { overflow: hidden; /* 隐藏超出部分 */ ...
在Firefox中,CSS的`text-overflow: ellipsis;`属性可能无法直接生效,这时就需要借助JavaScript来实现。通过计算元素的实际宽度和文本长度,当文本超过设定的宽度时,可以用省略号替换超出的部分,从而保持布局的...
text-overflow: ellipsis; white-space: nowrap;`来实现文本溢出后的省略号效果。 #### 七、链接 1. **游标手指cursor** - 使用`cursor: pointer;`来改变鼠标指针样式。 2. **给a标签内内容加上样式** - ...
请注意,由于浏览器兼容性问题,上述代码使用了一些前缀(如`-moz-`,`-webkit-`)以支持旧版本的Firefox和Safari。在实际开发中,你可能需要使用Autoprefixer等工具自动处理这些前缀,以确保代码在各种浏览器上的...
为了实现更好的跨浏览器兼容性,可以考虑使用JavaScript库如`clamp.js`或者使用CSS calc()函数结合伪元素来模拟实现。例如,可以创建一个伪元素`::after`,在其内部放置省略号,并通过计算文本的字符数来动态调整...
- **解决方法**:使用CSS的`text-overflow: ellipsis; white-space: nowrap; overflow: hidden;`属性组合来实现。 ##### 20. 为什么web标准中IE无法设置滚动条颜色了 - **问题描述**:在新的web标准中,IE不再支持...
今天在用到text-overflow的ellipsis属性得时候,突然发现原来FF下是没有省略号得(才发现,汗)。不想把这个问题交给后台或者用JS来做了,于是找了个折中的办法,就是:after伪类来模拟FF下的省略号。具体做法就是给...
20. 在表单中,若需要将文本框中的文字垂直居中,可以通过设置上下补白来实现,尤其是在Firefox浏览器中行高与高度组合无效的情况下。 21. 在定义链接的样式时,如果只定义了a:link,则需要记得定义其他三种状态(a...