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

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

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

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

 

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(一行一列)