overflow: hidden使用比較多在使用時,經(jīng)常會出現(xiàn)隱藏半個字符,下圖就出現(xiàn)字符顯示不完整,影響用戶體驗
解決辦法:
控制行高來實現(xiàn),通過查看父元素的高度。設(shè)置合理的行高,來實現(xiàn)字符顯示不全的情況
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
- <title>通高科技</title>
- <style>
- div {
- background-color: #eee;
- width: 200px;
- height: 50px;
- border: 1px dotted black;
- overflow: visible;
- margin-left: 40px;
- float: left;
- }
- .div1{
- overflow: hidden;
- line-height: 25px;/* 行高 */
- }
- </style>
- </head>
- <body>
- <div class="div1">當(dāng)您想更好地控制布局時,可以使用 overflow 屬性。overflow 屬性規(guī)定如果內(nèi)容溢出元素框會發(fā)生什么情況。overflow: hidden超出隱藏不顯示</div>
- </body>
- </html>
CSS Overflow 屬性指定在元素的內(nèi)容太大而無法放入指定區(qū)域時是剪裁內(nèi)容還是添加滾動條。
overflow 屬性可設(shè)置以下值:
visible - 默認。溢出沒有被剪裁。內(nèi)容在元素框外渲染
hidden - 溢出被剪裁,其余內(nèi)容將不可見
scroll - 溢出被剪裁,同時添加滾動條以查看其余內(nèi)容
auto - 與 scroll 類似,但僅在必要時添加滾動條
PS:overflow 屬性僅適用于具有指定高度的塊元素。也就說必須設(shè)置高度
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
- <title>通高科技</title>
- <style>
- div {
- background-color: #eee;
- width: 200px;
- height: 50px;
- border: 1px dotted black;
- overflow: visible;
- margin-left: 40px;
- float: left;
- }
- .div1{
- overflow: hidden;
- }
- .div2{
- overflow: scroll;
- }
- .div3{
- overflow: auto;
- }
- </style>
- </head>
- <body>
- <div>默認情況下,溢出是可見的,這意味著它不會被裁剪,而是在元素框外渲染: overflow: visible;</div>
- <div class="div1">當(dāng)您想更好地控制布局時,可以使用 overflow 屬性。overflow 屬性規(guī)定如果內(nèi)容溢出元素框會發(fā)生什么情況。overflow: hidden超出隱藏不顯示</div>
- <div class="div2">當(dāng)您想更好地控制布局時,可以使用 overflow 屬性。overflow 屬性規(guī)定如果內(nèi)容溢出元素框會發(fā)生什么情況。overflow: scroll超出加滾動條以查看其余內(nèi)容</div>
- <div class="div2">當(dāng)您想更好地控制布局時,可以使用 overflow 屬性。overflow 屬性規(guī)定如果內(nèi)容溢出元素框會發(fā)生什么情況。overflow: auto超出加滾動條以查看其余內(nèi)容,沒有超出不顯示滾動</div>
- <div class="div2">沒有超出不顯示滾動</div>
- </body>
- </html>