多行文字溢出显示省略号

多行文字结尾显示省略号

由于本人是新手，许多东西对于我来说，都是挑战，特开通博客园来记载分享项目中遇到的各种问题，其中很多资料都是借鉴别人的，谢谢各位大神！

最近的项目主要依托于谷歌内核的一个早期版本，对于CSS3中的linear-gradient都不能支持，太纠结！下面开始分享第一个问题，多行文字结尾显示省略号

首先项目中应用的解决方案：

对于单行文字显示省略号

  text-overflow: clip |ellipsis

        clip:不显示省略标记，而是简单的裁切。

       ellipsis: 当对象内文本溢出时显示省略标记

     代码如下：

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;   //防止换行

width: 200px;       

    很多人都说火狐不支持这个，我的版本是19，可以显示效果，我觉得不必理会这个，因为国内用户的操作系统Windows占大部分，都是安装着IE，当用户选择火狐时，下载的一定是最近的版本，所以这个BUG无关大雅

 

下面说说多行文字的省略号，由于觉得超过多行文字直接隐藏不美观，特搜索了相关知识解决这个问题，在

小影’s Blog(http://c7sky.com/text-overflow-ellipsis-on-multilinea-text.html)中找到相关解决方案

谷歌解决方案：

overflow:hidden;

text-overflow:ellipsis;

display: –webkit-box;

-webkit-line-clamp:2;   //在第几行加省略号

-webkit-box-orient:vertical;

  其中关于display的属性下篇再讲

opera解决方案：

overflow:hidden;

white-space:normal;

height:3em;

text-overflow: –o-ellipsis-lastline;

这两种都是各自的私有解决方案，并且相互冲突，谷歌的不能出现height，但opera必须有height，因此，不能用于项目中，必须采取js来解决这个问题

HTML如下

<div class="figcaption"><p>作为微软的游戏平台，Xbox已经出现在了Windows Phone和Windows 8中，就在最近，微软宣布将旗下的Zune消费品牌也一并整合至Xbox品牌下，Xbox Live服务影响力越来越大，渗透面也越来越广。</p></div> 
    
<div class="figcaption"><p>固定一个喜欢的网站可不可以？当然！把每天常去的网站统统固定到开始屏幕中。如何固定？打开 IE10，在网页空白处点击鼠标右键，在应用栏中点击“图钉”图标即可完成固定。</p></div> 
    
<div class="figcaption"><p>先前给大家介绍了很好用的 Colors！今天给大家介绍一款风格不同的画画软件——Fresh Paint，我们可以用它画出油画。</p></div> 
    
<div class="figcaption"><p>You probably can't do it (currently?) without a fixed-width font like Courier. With a fixed-width font every letter occupies the same horizontal space, so you could probably count the letters and multiply the result with the current font size in ems or exs. Then you would just have to test how many letters fit on one line, and then break it up.</p></div>

css如下：

.figcaption { 
    background: #EEE; 
    width: 410px; 
    height: 3em; 
    margin: 1em; 
} 
.figcaption p { 
    margin: 0; 
    line-height: 1.5em; 
} 

jq如下：

$(".figcaption").each(function(i){ 
    var divH = $(this).height(); 
    var $p = $("p", $(this)).eq(0); 
    while ($p.outerHeight() > divH) { 
        $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...")); 
    }; 
});