溢出(装不下)

本文介绍了CSS中overflow属性的三种模式:hidden用于隐藏超出内容,auto在需要时显示滚动条,scroll始终显示滚动条。同时,讲解了如何使用white-space:nowrap防止文字换行,并结合overflow:hidden和text-overflow:ellipsis实现单行文本溢出显示省略号的效果。
摘要由CSDN通过智能技术生成

       overflw-x
       overflow-y
                
       overflow: hidden; 溢出隐藏(超出的内容被隐藏)
       overflow:auto; 内容超出盒子的大小出现滚动条,不超出盒子的就不显示滚动条
       overflow: scroll; 不管内容有没有超出盒子的大小,都会出现滚动条

       怎么让中文不换行?
       white-space: nowrap; 强制文字在一行(不换行),遇到<br />会换行

文字溢出:
                text-overflow: ellipsis;
                
            
    溢出出现省略号的条件(四个条件要写在同一个标签里)针对的单行文本:
                      1,width
                      2, white-space:nowrap 让文字不换行
                      3,overflow:hidden;
                      4, text-overflow:ellipsis;
            
                      总结:
                      overflow:hidden;
                      overflow:auto;
            
           溢出出现省略号的条件(四个条件要写在同一个标签里)针对的单行文本
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值