页面中字符串超出后的解决方案_网页字符超了怎么办-CSDN博客

http://www.th7.cn/web/html-css/201511/135950.shtml

在几年前我总结过一种方式，但是最近又遇到了问题，开始寻求解决方式。最终重新整理成文。以备查阅。
PS.个人感觉方法二用的多些~

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

二、显示省略号
这种方式很好！大赞！既不影响用户使用也很美观！就采用这种方式了。但是如何做到呢？

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>