css如何设置td溢出隐藏

醉折花枝作酒筹
Lepaskan: 2023-01-05 16:10:30
asal
3833 人浏览过

方法:首先使用“word-break:keep-all”语句设置不换行;然后使用“overflow:hidden”语句设置超出隐藏部分;最后使用“text-overflow:ellipsis”语句设置溢出显示省略号。

css如何设置td溢出隐藏

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

td溢出隐藏

table{
        width:100px;
        table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
    }
    td{
        width:100%;
        word-break:keep-all;/* 不换行 */
        white-space:nowrap;/* 不换行 */
        overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用*/
    }
Salin selepas log masuk

全部代码:

 
 
 
 
document 


19999 19999
19999 19999
19999 19999
Salin selepas log masuk

效果截图:

5D`D{2L854]X9C)FR)1Q8NH.png

推荐学习:css视频教程

以上是css如何设置td溢出隐藏的详细内容。更多信息请关注PHP中文网其他相关文章!

Label berkaitan:
css
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
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!