<tbody id="bvcr2"><pre id="bvcr2"></pre></tbody>

css溢出部分隱藏顯示滾動條

css文本溢出處理辦法，超出部分隱藏內(nèi)容顯示滾動條顯示剩余內(nèi)容或者不顯示滾動條，超出部分直接隱藏不顯示

目錄: 1overflow: hidden使用比較多在使用時，經(jīng)常會出現(xiàn)隱藏半個字符; 2Overflow屬性控制超出文本顯示隱藏

overflow: hidden使用比較多在使用時，經(jīng)常會出現(xiàn)隱藏半個字符

overflow: hidden使用比較多在使用時，經(jīng)常會出現(xiàn)隱藏半個字符，下圖就出現(xiàn)字符顯示不完整，影響用戶體驗

解決辦法：
控制行高來實現(xiàn)，通過查看父元素的高度。設置合理的行高，來實現(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">當您想更好地控制布局時，可以使用 overflow 屬性。overflow 屬性規(guī)定如果內(nèi)容溢出元素框會發(fā)生什么情況。overflow: hidden超出隱藏不顯示</div>

    </body>

</html>

Overflow屬性控制超出文本顯示隱藏

CSS Overflow 屬性指定在元素的內(nèi)容太大而無法放入指定區(qū)域時是剪裁內(nèi)容還是添加滾動條。

overflow 屬性可設置以下值：

visible - 默認。溢出沒有被剪裁。內(nèi)容在元素框外渲染

hidden - 溢出被剪裁，其余內(nèi)容將不可見

scroll - 溢出被剪裁，同時添加滾動條以查看其余內(nèi)容

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 屬性規(guī)定如果內(nèi)容溢出元素框會發(fā)生什么情況。overflow: hidden超出隱藏不顯示</div>

            <div class="div2">當您想更好地控制布局時，可以使用 overflow 屬性。overflow 屬性規(guī)定如果內(nèi)容溢出元素框會發(fā)生什么情況。overflow: scroll超出加滾動條以查看其余內(nèi)容</div>

            <div class="div2">當您想更好地控制布局時，可以使用 overflow 屬性。overflow 屬性規(guī)定如果內(nèi)容溢出元素框會發(fā)生什么情況。overflow: auto超出加滾動條以查看其余內(nèi)容,沒有超出不顯示滾動</div>

            <div class="div2">沒有超出不顯示滾動</div>





    </body>

</html>