`
无赖君子
  • 浏览: 6558 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

text-overflow:ellipsis溢出显示省略号兼容所有浏览器的解决办法

阅读更多

我想大家在做项目的时候都遇到这样的需求:对于一些列表文本过长溢出显示省略号,我们可以text-overflow:ellipsis很简单地达到效果,很遗憾不能兼容火狐浏览器。

text-overflow被列入了CSS3属性,火狐对于标准的实现一向都很好,很郁闷为什么没有实现这个(FireFox 7.0貌似已经实现了)。

有三种办法可以实现:

方法1:用css实现 text-overflow:ellipsis

HTML代码:

<h3>用CSS解决</h3>
<ul class="ellipsis">
    <li><a href="##" title="text-overflow:ellipsis引起兼容性问题解决办法">text-overflow:ellipsis引起兼容性问题解决办法</a></li>
    <li><a href="##" title="text-overflow:ellipsis引起兼容性问题解决办法">text-overflow:ellipsis引起兼容性问题解决办法</a></li>
    <li><a href="##" title="text-overflow:ellipsis引起兼容性问题解决办法">text-overflow:ellipsis引起兼容性问题解决办法</a></li>
    <li><a href="##" title="text-overflow:ellipsis引起兼容性问题解决办法">text-overflow:ellipsis引起兼容性问题解决办法</a></li>
    <li><a href="##" title="text-overflow:ellipsis引起兼容性问题解决办法">text-overflow:ellipsis引起兼容性问题解决办法</a></li>
</ul>

CSS代码:

.ellipsis li{
    -moz-binding: url('ellipsis.xml#ellipsis');/*相对当前html的路径*/
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    width:200px;
}

你可能也注意到了,兼容火狐浏览器的关键代码 -moz-binding: url('ellipsis.xml#ellipsis'); 就是加载了一个XML文件。

ellipsis.xml代码:

<?xml version="1.0" encoding="utf-8"?>
<bindings
 xmlns="http://www.mozilla.org/xbl"
 xmlns:xbl="http://www.mozilla.org/xbl"
 xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
    <binding id="ellipsis">
        <content>
            <xul:description crop="end" xbl:inherits="value=xbl:text">
                <children/>
            </xul:description>
        </content>
    </binding>
</bindings>

不要问我为什么,这些是浏览器的bug,我想不必深究。了解的大神们也可以科普一下。

方法2:用js截取字符串

实现代码:

<h3>用JS截取字符串</h3>
<ul class="list">
    <li><a href="##" title="text-overflow:ellipsis引起兼容性问题解决办法">text-overflow:ellipsis引起兼容性问题解决办法</a></li>
    <li><a href="##" title="text-overflow:ellipsis引起兼容性问题解决办法">text-overflow:ellipsis引起兼容性问题解决办法</a></li>
    <li><a href="##" title="text-overflow:ellipsis引起兼容性问题解决办法">text-overflow:ellipsis引起兼容性问题解决办法</a></li>
    <li><a href="##" title="text-overflow:ellipsis引起兼容性问题解决办法">text-overflow:ellipsis引起兼容性问题解决办法</a></li>
    <li><a href="##" title="text-overflow:ellipsis引起兼容性问题解决办法">text-overflow:ellipsis引起兼容性问题解决办法</a></li>
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function (){
    var list = $(".list li a");
    list.each(function(index, element) {
        var str = $(this).text();
        $(this).text(cutStr(str,34)+'...');
    });
    
});
//截取中英字符串 双字节字符长度为2 ASCLL字符长度为1
function cutStr(str,cutLen){
    var returnStr = '',    //返回的字符串
        reCN = /[^\x00-\xff]/,    //双字节字符
        strCNLen = str.replace(/[^\x00-\xff]/g,'**').length; 
    if(cutLen>=strCNLen){
        return str;
    }
    for(var i=0,len=0;len<cutLen;i++){
        returnStr += str.charAt(i);
        if(reCN.test(str.charAt(i))){
            len+=2;
        }else{
            len++;
        }
    }
    return returnStr;
}
</script>

哥偷懒了,没有封装好,还用了个jquery框架,因为已经有插件了—— jQuery ellipsis plugin 

方法3:后台控制字符串

我很喜欢这个方法,如果后台的同事们没意见的话。

如果读者还有其他更好的方法,希望能够分享一下,欢迎加入web前端交流群(75701468) 分享您我的经验.

1
0
分享到:
评论

相关推荐

    无js实现text-overflow: ellipsis; 完美支持Firefox

    在前端开发中,文本溢出处理是一个常见的需求,特别是当我们在设计网页时,希望限制某段文字的显示长度,超出部分用省略号(...)表示。`text-overflow: ellipsis;` 是 CSS3 提供的一个样式属性,用于处理溢出的文本...

    使用text-overflow:ellipsis实现文字超出用省略号显示

    当设置为 `ellipsis` 时,溢出的文本将以省略号的形式显示。 结合上述三个属性,基本的CSS样式可以写为: ```css .element { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` 需要...

    使用text-overflow:ellipsis实现溢出文本省略号显示无需js

    今天在做jsp页面展示的时候碰到一个实现溢出文本显示省略号的需求 原本使用js截取字符串然后判断字符串长度实现,不过相对比较繁琐,并且字符串长度不能自适应 听说用css的 text-overflow: ellipsis 也可以实现,...

    FF下文本溢出的text-overflow完美解决方方案

    `text-overflow`属性是CSS中用于处理文本溢出的一种解决方案,它允许我们控制超出元素边界时的文本显示方式。本文将详细介绍在Firefox下如何完美解决文本溢出的问题,并提供相关的解决方案。 首先,我们需要理解`...

    IE8/9 使用text-overflow: ellipsis 做块元素超长内容变省略号的问题

    虽然标准的CSS属性支持需要包括overflow, white-space和text-overflow三个属性的结合使用,但在IE8中实现单行文本溢出显示省略号的功能,还需要遵循一些特定的规则。 在CSS中实现文本溢出隐藏并显示省略号效果的...

    无hack无js全兼容text-overflow-ellipsis效果

    标题中的"无hack无js全兼容text-overflow-ellipsis效果"指的是在网页设计中实现文本溢出时显示省略号的效果,而且这个方法无需使用JavaScript(js)或任何黑客(hack)技巧,并且能够兼容各种浏览器。`text-overflow: ...

    CSS实现单行、多行文本溢出显示省略号的实现方法.docx

    总结来说,CSS实现单行或多行文本溢出显示省略号的方法主要包括使用`white-space: nowrap`, `overflow: hidden`, 和 `text-overflow: ellipsis`组合,以及利用Webkit的`-webkit-line-clamp`属性和CSS渐变背景技术。...

    移动端的text-overflow多行文本溢出显示省略号(…)

    在移动端,`text-overflow: ellipsis` 属性常用于单行文本溢出时显示省略号,但其本身并不支持多行文本的处理。本文将探讨如何在不同场景下实现多行文本溢出显示省略号的效果。 首先,对于基于WebKit的浏览器(如...

    CSS省略号text-overflow超出溢出显示省略号

    标题和描述中提到的“CSS省略号text-overflow超出溢出显示省略号”是指在CSS样式中利用`text-overflow: ellipsis;`来实现当文本内容超出指定容器的宽度时,用省略号表示被截断的文本。 `text-overflow`属性有以下几...

    用css截取字符的几种方法详解(css排版隐藏溢出文本).docx

    这种方法适用于需要保持所有文本都在一行内的场景,但无法显示省略号。 3. **使用`display: -webkit-box`和`-webkit-line-clamp`** 对于多行文本的截断,可以利用WebKit浏览器的非标准属性`-webkit-line-clamp`和...

    无hack无js实现省略号效果

    当设置了`overflow: hidden`和`white-space: nowrap`来隐藏超出部分的文本时,`text-overflow: ellipsis`会添加省略号(...)来表示被截断的内容。这个特性在创建简介、摘要或者长标题的展示时非常有用,因为它可以...

    CSS文本超出2行就隐藏并且显示省略号

    //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为...

    纯css控制超出部分省略号显示

    ### 纯CSS控制超出部分省略号显示 在网页设计与开发中,经常会遇到文本长度不可预知的情况,特别是当容器的宽度固定时,如何优雅地处理超出部分的文本展示就显得尤为重要。本文将详细介绍如何仅使用CSS来实现文本...

    CSS控制文本的长度 超过一行显示省略号的实现方法

    代码如下: ... &lt;div u00a0style=width:100px;height:20px;text-overflow:ellipsis;...我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏

    前端大厂最新面试题-single_multi_line.docx

    * `text-overflow: ellipsis`:多行文本的情况下,用省略号“…”隐藏溢出范围的文本 例如: ```css p { width: 400px; border-radius: 1px solid red; -webkit-line-clamp: 2; display: -webkit-box; -webkit...

    课题_CSS隐藏多余文字的几个方法 (2).docx

    当文本溢出其容器时,它会在末尾显示省略号。例如,`&lt;div style="width:100px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"&gt;`可以实现这一效果。需要注意的是,`text-overflow:ellipsis;`在Fire...

    HTML超出文本显示省略号...通过text-overflow实现

    `**:这是核心属性,告诉浏览器当文本溢出元素边界时,应该显示一个省略号。`ellipsis`值表示使用省略号作为溢出的表示。 2. **`white-space: nowrap;`**:这个属性用于控制元素内的文本换行行为。`nowrap`值使得...

Global site tag (gtag.js) - Google Analytics