页面中字符串超出后的解决方案

原创 2015年11月19日 13:46:12


字符串超出长度的解决方案


在几年前我总结过一种方式,但是最近又遇到了问题,开始寻求解决方式。最终重新整理成文。以备查阅。


一、隐藏掉

这种方式很直接,但是容易让人误会,觉得就只有这些文字了。其实还被隐藏了很多,甚至关键性的文字。 所以果断抛弃。

二、显示省略号

这种方式很好!大赞!既不影响用户使用也很美观!就采用这种方式了。但是如何做到呢?

1、一般做法,程序截取字符串

这种最简单,直接一句substring就可以了。但是这个需要在页面上写这么一句。如果容器的宽度改了,那么所有截取的地方都需要更改。不仅麻烦、繁琐,还容易忘记改这个截取的长度。还有一个弊端是,显示的字符串中英文混合的时候,导致截取字符串长度的不统一。有的不到头就开始显示省略号了。这个很不美观!也果断抛弃!OMG。。。那要怎么办呢?能不能有一种完美的方式呢?接下来考虑css来控制。

2、css动态控制

其实这种方式很早就有的系统已经使用了。css可以动态根据宽度控制字符串的长度。而且不管是中英文都是截取到了最后才显示省略号。也比较美观。赞!

用的的属性是组合出来的。主要是 text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 三个样式。这三个样式必须同时使用。

这种方式我之前早就总结过,请参阅:http://blog.csdn.net/lingxyd_0/article/details/7947888

这样方式既然是css控制就要考虑兼容性。在IE以及Google Chrome下都完美兼容,但是在FF下无效!因为text-overflow:ellipsis属性在FF中是没有效果的

那怎么解决呢? 后来也找到了在FF下的有效控制方式,请参阅:http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/08/06/1793922.html

解决的思路就是一个标签作切除内容,再加一个标签作填补省略号用。切除好说,填补省略号呢?不用js,用CSS实现的话就要用到伪对象after。同时,max-width 解决使用伪对象后总长度超长问题。总结样式如下:

html 代码

<div>
<p><span>CSS Web Design 我爱CSS-Web标准化 Div+css教程 - www.52css.com</span><p>
</div>
css代码
div{
width:200px;/*容器的基本定义*/
height:200px;
background-color:#eee;
}
/* IE下的样式 */ 
p span{
display: block;
width:200px;/*对宽度的定义,根据情况修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* FF 下的样式 */ 
p{clear:both;}
p span{
float:left;
max-width:175px;   /*IE不能解释该属性,而FF可以*/
}
p:after{
content:"...";
}



但是最近也遇到了问题。通过这种方式解决的是单行文本的显示方式。如果在容器里面的文本不是当行,需要显示多行,如果文本太多要求在最后一行的末尾追加省略号。怎么办?容器有高度

3、多行的控制

样式目前没找到好的解决方法,暂且想通过js来控制实现。思路是如果超了就自动截取,知道宽度和高度适合了为止。

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        $(".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)(\.\.\.)?$/, "..."));
            };
        });
        });
    </script>
    <style>
        .figcaption
        {
            background: #EEE;
            width: 410px;
            height: 3em;
            margin: 1em;
        }
        .figcaption p
        {
            margin: 0;
            line-height: 1.5em;
        }
    </style>
</head>
<body>
    <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>
</body>
</html>





版权声明:本文为博主原创文章,欢迎大家疯狂转载。

css中overflow:hidden 不起作用了吗?【非常好的实例讲解】

css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗? ...

CSDN博客页面自定义左侧博客栏目

介绍自定义CSDN博客页面左侧博客栏目的方法,可以显示自己想显示的内容及链接...

通过java后台拼接json字符串修改页面样式----一页多用 + 双引号(")和单引号(')截断字符串解决方案

[java] view plaincopy 1.组装json格式字符串     * 通过读取流程对应工单的字段权限 将字段权限拼接为json格式字符串       * 拼接json字符串...

个人JSP页面遗留问题解决方案

  • 2015年04月10日 00:21
  • 75KB
  • 下载

Python高级爬虫之动态加载页面的解决方案与爬虫代理

http://www.2cto.com/Article/201603/491747.html 如果读者读过我前面的关于爬虫的文章,应该大概都清楚我们现在可以对一个静态的web页面”为所欲为“...

JS中页面跳转,传值包含中文时乱码解决方案

首先,在JS中将要传递的中文编码:encodeURI(encodeURI(value)); 然后在跳转界面中取值时通过以下方式解码:java.net.URLDecoder.decode(value ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:页面中字符串超出后的解决方案
举报原因:
原因补充:

(最多只允许输入30个字)