overflow: hidden使用比較多在使用時,經常會出現隱藏半個字符,下圖就出現字符顯示不完整,影響用戶體驗
解決辦法:
控制行高來實現,通過查看父元素的高度。設置合理的行高,來實現字符顯示不全的情況
- <!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">當您想更好地控制布局時,可以使用 overflow 屬性。overflow 屬性規定如果內容溢出元素框會發生什么情況。overflow: hidden超出隱藏不顯示</div>
- </body>
- </html>
CSS Overflow 屬性指定在元素的內容太大而無法放入指定區域時是剪裁內容還是添加滾動條。
overflow 屬性可設置以下值:
visible - 默認。溢出沒有被剪裁。內容在元素框外渲染
hidden - 溢出被剪裁,其余內容將不可見
scroll - 溢出被剪裁,同時添加滾動條以查看其余內容
auto - 與 scroll 類似,但僅在必要時添加滾動條
PS:overflow 屬性僅適用于具有指定高度的塊元素。也就說必須設置高度
- <!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">當您想更好地控制布局時,可以使用 overflow 屬性。overflow 屬性規定如果內容溢出元素框會發生什么情況。overflow: hidden超出隱藏不顯示</div>
- <div class="div2">當您想更好地控制布局時,可以使用 overflow 屬性。overflow 屬性規定如果內容溢出元素框會發生什么情況。overflow: scroll超出加滾動條以查看其余內容</div>
- <div class="div2">當您想更好地控制布局時,可以使用 overflow 屬性。overflow 屬性規定如果內容溢出元素框會發生什么情況。overflow: auto超出加滾動條以查看其余內容,沒有超出不顯示滾動</div>
- <div class="div2">沒有超出不顯示滾動</div>
- </body>
- </html>