强制换行、强制不换行、CSS省略号

强制换行用法：

属性：强制换行：word-wrap:break-word; word-break:break-all; white-space:pre-wrap;
　　　 强制不换行：overflow:hidden; width:300px; white-space:nowrap; text-overflow: ellipsis;

white-space 属性详解

• normal： 默认处理方式。
• pre： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象
• nowrap： 强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。
• pre-wrap： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
• pre-line： 保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

使用组合属性

• 一般块级元素用：.as-wrap
• table标签中需添加：.as-wrap-table

/*
  @ 名称: 强制换行
  @ 用法:
    * 一般块级元素用：.as-wrap
    * table标签中需添加：.as-wrap-table
  @ 例子:
    <p class="as-wrap">…</p>
    <table class="as-wrap as-wrap-table"></table>
*/

/* 一般 block-level 元素 */
.as-wrap, .as-wrap td, .as-wrap th{
    word-wrap:break-word;word-break:break-all;
}

/* table */
.as-wrap-table{
    table-layout:fixed;
}

省略号 单行文本解决方案

解决方案描述

.ellipsis{
    width: 300px; /*设置宽度*/
    white-space: nowrap; /*设置不折行*/
    overflow: hidden; /*设置超过的隐藏*/
    text-overflow: ellipsis; /*这就是省略号喽*/
}

/* 测试 */
.box{width:300px;}
.box p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
如果仅依赖父层的宽度自适应，内层不设置宽度，仅IE6不支持，其他浏览器都OK，内层设置width:100%;可以解决此问题。

问题及注意事项：

如上代码设置，都是必选项，每个属性都不可缺少，且仅适用于单行文本。

省略号 多行文本解决方案

问题及注意事项：

实践出真知