文字超出隐藏并显示省略号，表格固定表头，两表格左右对齐,

文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到，我想很多人都碰到过吧，这个有两种解决方法

一是用程序开截取字符长度，这个其实也是可以的

第二种是用样式来做,这里主要介绍一下用样式怎么来做吧，我话也不多说了吧直接上代码吧，

css样式如下：
.css1{
color:#6699ff;border:1px #ff8000 dashed;
margin-bottom:20px;
width: 20em;/*不允许出现半汉字截断*/
}
.css2 {
overflow: hidden; /*自动隐藏文字*/
text-overflow: ellipsis;/*文字隐藏后添加省略号*/
white-space: nowrap;/*强制不换行*/
width: 20em;/*不允许出现半汉字截断*/
color:#6699ff;border:1px #ff8000 dashed;
}

html代码如下：
<div class="css1">Web前端开发 - 专注于网站前端设计与Web用户体验</div>
<div class="css2">Web前端开发 - 专注于网站前端设计与Web用户体验</div>

<st这yle type=”text/css”>
.css1{
color:#6699ff;border:1px #ff8000 dashed;
margin-bottom:20px;
width: 20em;/*不允许出现半汉字截断*/
}
.css2 {
overflow: hidden; /*自动隐藏文字*/
text-overflow: ellipsis;/*文字隐藏后添加省略号*/
white-space: nowrap;/*强制不换行*/
width: 20em;/*不允许出现半汉字截断*/
color:#6699ff;border:1px #ff8000 dashed;
}
</style>
<div class=”css1″>Web前端开发 – 专注于网站前端设计与Web用户体验</div>
<div class=”css2″>Web前端开发 – 专注于网站前端设计与Web用户体验</div>
<p>

HTML表格固定表头：

<div style="width:1024px;height:500px;overflow-y:hidden;overflow-x:auto;">
<div>
<table width="1500px"><tr><th>……</th></table>
</div>
<div style="width:1500px;height:450px;overflow-x:hidden;overflow-y:auto;">
<table width="100%"><tr><td>……</td></tr></table>
</div>
</div>

可用bootstrap autoSize.js 自动根据屏幕设置宽高

两表格左右对齐方法：

<style type="text/css">
table {
table-layout: fixed; /*自动表格布局*/
}
.wordBreak {
word-break: break-all; /*firefox不支持*/
/*兼容firefox,让多余的部分隐藏*/
display: block;
overflow: hidden;
}
</style>

<div style="width: 600px;">
<div>
<table width="583px" cellpadding="0" border="1">
<thead>
<tr>
<th>
<div class="wordBreak">1</div>
</th>
<th>
<div class="wordBreak">2</div>
</th>
<th>
<div class="wordBreak">3</div>
</th>
<th>
<div class="wordBreak">4</div>
</th>
</tr>
</thead>
</table>
</div>
<div style="height: 40px; overflow: auto">
<table width="100%" cellpadding="0" border="1">
<tbody>
<tr>
<td>
<div class="wordBreak">82.84592342341234132412341234</div>
</td>
<td>
<div class="wordBreak">82.8459123412341342143</div>
</td>
<td>
<div class="wordBreak">82.8459123413132412434</div>
</td>
<td>
<div class="wordBreak">82.8459132412234134</div>
</td>
</tr>
</tbody>
</table>
</div>

</div>

//设置表格宽高
var dtCentWidth = $("#dtCenter").width();//table 内容部分宽度
var totalHeight = $(".div_ListCenter").height();//两个table整体高度
var topHeight = $("#divTop").height();//table 表头高度
$("#dtTop").width(dtCentWidth + 1);
$("#divCenter").height(totalHeight - topHeight - 6);

或采用下面方法：

例1：(IE浏览器)长串英文自动回行

方法：同时加入word-wrap:break-word;

/*不需要加入<div class="wordBreak"> */

table{table-layout:fixed;word-wrap:break-word;}

例2：(IE浏览器)一个表格里的内容隐藏

方法：使用样式table-layout:fixed与nowrap(一行一列)