Rumah > hujung hadapan web > html tutorial > CSS控制文本超出指定宽度显示省略号和文本不换行 - roucheng

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

WBOY
Lepaskan: 2016-05-20 13:49:17
asal
1101 orang telah melayarinya

一般的文字截断(适用于内联与块):

<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>
}
Salin selepas log masuk

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

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

<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> }
Salin selepas log masuk

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

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

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan