Rumah > Artikel > hujung hadapan web > 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会有“...”,
其它的浏览器文本超出指定宽度时会隐藏。