在实际的项目中，因为client浏览器文字内容的长度不确定性和页面布局的固定性，难免会出现文字内容超过div（或其它标签，下同）区域的情况。此时比較好的做法就是当文字超过限定的div宽度后自己主动以省略号（…）显示，这样。依照习惯，人们都会知道这儿有文字被省略了。
使用CSS截断字符串方法
CSS中有个属性叫做text-overflow:ellipsis。
说明：长处是内容能够为不论什么HTML元素。包含超链接和图片等，在IE6中还会在结尾自己主动显示省略号。缺点是必须指定宽度数值。而且宽度不能是百分数，否则在IE中会被觉得是字符总长的百分比。
<div style="100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> 随意长度的字符串 </div>使用JQuery（Javascript）方法
通过在界面控件中。自己定义属性方式，截取字符串加入省略号方案来解决。比如參考网上资料。使用“limit”自己定义属性方案。基于Bootstrap代码例如以下所看到的：
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面。不论什么其它内容都*必须*尾随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$('table').tooltip();
jQuery.fn.limit=function(){
var self = $("[limit]");
self.each(function(){
var objString = $(this).text();
var objLength = $(this).text().length;
var num = $(this).attr("limit");
if(objLength > num){
$(this).attr("title",objString);
objString = $(this).text(objString.substring(0,num) + "...");
}
})
}
$(function(){
$("[limit]").limit();
})
</script>
<body>
<h1>你好，世界！</h1>
<table>
<tr>
<td class="centerContentTd" nowrap="nowrap" title="这里是所有内容" limit="8">这里显示截取后的内容长度大于8将用省略号取代</td>
</tr>
</table>
</body>
</html>
关于被截断字符串的浮动提示
使用“Bootstrap 工具提示（Tooltip）插件”
当您想要描写叙述一个链接的时候，工具提示（Tooltip）就显得非常实用。工具提示（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启示。
工具提示（Tooltip）插件做了非常多改进，比如不须要依赖图像。而是改用 CSS 实现动画效果。用 data 属性存储标题信息。
详见此插件使用方法的链接。
使用“Bootstrap Popover（弹出框）”
Bootstrap Popover（弹出框）是使用定制的 Jquery 插件创建的。
它能够用来显示不论什么元素的一些信息。
在本教程中，您将看到怎样使用 Bootstrap Popover。以及怎样使用一些可用选项进行定制。
详见此插件使用方法的链接。
參考：
1.《用jquery 实现 超出字符 截断加上省略号而且能够提示所有内容》 如花smile
2.《用CSS截断字符串》 如花smile
3.《关于文字内容溢出用点点点(…)省略号表示》 张鑫旭 2009年9月
4.“菜鸟教程”站点：http://www.runoob.com