处理网页上的字符溢出的方法

网页上有什么一行字符太长了，会溢出来，影响网页美观，这时需要对字符进行溢出处理。

比如下面的例子：

<div class="title">省略字符的例子</div>
<div class="overflow">这是一段测试文字，测试过长的文字是否会被省略，省略的文字为今天是星期五</div>
<div class="overflow">这是一段测试文字，测试过长的文字是否会被省略，省略的文字为今天是星期五</div>

　要想达到省略的效果给div.overflow声明一下的样式：

 .overflow{
        width:27em;
        -o-text-overflow:ellipsis;/*opera浏览器
        white-space:nowrap;/*控制内容在单行显示*/
        text-overflow:ellipsis;/*省略的内容用省略号表示*/
        overflow:hidden;/*隐藏省略的内容*/
    }

　　但是这个方法并不适合火狐浏览器。对于火狐浏览器要引用ellipsis.xml文件。

  -moz-binding:url('ellipsis.xml#ellipsis');

　　省略的效果图如下：

第二种方法就是使用jQuery。代码如下：

<script>
    $(".overflow").each(function(){
        var maxwidth=23;
        if($(this).text().length>maxwidth){
            $(this).text($(this).text().substring(0,maxwidth));
            $(this).html($(this).html()+'...');
        }
    });

　　PS：要是对表格内容进行单行控制和省略，那么必须table声明一个样式

.table{
width:100%;
table-layout:fixed;
}

如果需要显示当鼠标浮动在对应的td上，全部内容能显示在一个悬浮框里，可以采用Bootstrap里面的Tooltip插件。提示工具（Tooltip）。默认情况是把提示工具放在要提示内容的后面。有两种方法添加提示工具

（1） 通过data属性：如需添加一个提示工具，只需向一个锚标签添加data-toggle="tooltip"即可

（2）通过JavaScript

$('#identifier').tooltip(options)

因为Tooltip不是纯css插件，如果需要该插件，必须经过jquery来激活。使用以下的脚本

$(function () { $("[data-toggle='tooltip']").tooltip(); });

实例

<button type="button" class="btn btn-default" data-toggle="tooltip"
        title="默认的 Tooltip">
    默认的 Tooltip
</button>
<script>
    $(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>

title表示是要显示的全部内容。

当鼠标悬浮在按钮上的话，就会出现“默认Tooltip“的悬浮框。

如果想改变悬浮框的样式。可以通过修改#tooltip样式来修改样式。