CSS控制文本超出指定宽度显示省略号和文本不换行 - roucheng

一般的文字截断（适用于内联与块）：

<span style="color: #800000;">.text-overflow </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;">block</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">内联对象需加 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">31em</span>;<span style="color: #008000;">/*</span><span style="color: #008000;"> 何问起 hovertree.com </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    word-break</span>:<span style="color: #0000ff;">keep-all</span>;<span style="color: #008000;">/*</span><span style="color: #008000;"> 不换行 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    white-space</span>:<span style="color: #0000ff;">nowrap</span>;<span style="color: #008000;">/*</span><span style="color: #008000;"> 不换行 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;">hidden</span>;<span style="color: #008000;">/*</span><span style="color: #008000;"> 内容超出宽度时隐藏超出部分的内容 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    text-overflow</span>:<span style="color: #0000ff;">ellipsis</span>;<span style="color: #008000;">/*</span><span style="color: #008000;"> 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。</span><span style="color: #008000;">*/</span>
}

对于表格文字溢出的定义：

对于表格超出范围显示省略号

<span style="color: #008080;"> 1</span> <span style="color: #800000;">table</span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">30em</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">    table-layout</span>:<span style="color: #0000ff;">fixed</span>;<span style="color: #008000;">/*</span><span style="color: #008000;"> 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 </span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> <span style="color: #008000;">/*</span>
<span style="color: #008080;"> 6</span> <span style="color: #008000;">何问起
</span><span style="color: #008080;"> 7</span> <span style="color: #008000;">hovertree.com
</span><span style="color: #008080;"> 8</span> <span style="color: #008000;">*/</span>
<span style="color: #008080;"> 9</span> <span style="color: #800000;">td</span>{
<span style="color: #008080;">10</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">100%</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">    word-break</span>:<span style="color: #0000ff;">keep-all</span>;<span style="color: #008000;">/*</span><span style="color: #008000;"> 不换行 </span><span style="color: #008000;">*/</span>
<span style="color: #008080;">12</span> <span style="color: #ff0000;">    white-space</span>:<span style="color: #0000ff;">nowrap</span>;<span style="color: #008000;">/*</span><span style="color: #008000;"> 不换行 </span><span style="color: #008000;">*/</span>
<span style="color: #008080;">13</span> <span style="color: #ff0000;">    overflow</span>:<span style="color: #0000ff;">hidden</span>;<span style="color: #008000;">/*</span><span style="color: #008000;"> 内容超出宽度时隐藏超出部分的内容 </span><span style="color: #008000;">*/</span>
<span style="color: #008080;">14</span> <span style="color: #ff0000;">    text-overflow</span>:<span style="color: #0000ff;">ellipsis</span>;<span style="color: #008000;">/*</span><span style="color: #008000;"> 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">15</span> }

需要你注意的是，这个CSS样式只对单行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。 这个写法只有IE会有“...”，

其它的浏览器文本超出指定宽度时会隐藏。

特效：http://www.cnblogs.com/roucheng/p/texiao.html