• <ol id="gebcs"></ol>
    <track id="gebcs"><i id="gebcs"></i></track>

    CSS實現單行、多行文本溢出顯示省略號...

    時間:2019-11-10 16:01:06 類型:HTML/CSS
    字號:    

    一. CSS實現單行溢出顯示省略號

    #dan_hang{
    			height: 30px; 
    			line-height: 30px;
    			margin: 50px auto;
    			padding: 5px;
    			border: 1px solid #ccc;
    			border-radius: 5px;
    			font-size: 12px;
    			width: 150px;
    			overflow: hidden;
    			text-overflow:ellipsis;
    			white-space: nowrap;
    	}
    <div id="dan_hang">
    			你好, 歡迎來到雅騰科技有限公司
    </div>

    實現效果如下:

    1.jpg

    二. 實現多行溢出顯示省略號

    #duo_hang{
    			width: 150px;
    			border: 1px solid #ccc;
    			border-radius: 5px;
    			padding: 5px;
    			margin: 50px auto;
    			font-size: 12px;
    			line-height: 26px;
    			height: 78px; /*高度正好是 line-height的整數倍,防止超出的文字*/
    			display: -webkit-box;
    			-webkit-box-orient: vertical;
    			-webkit-line-clamp: 3;
    			overflow: hidden;
    	}
    <div id="duo_hang">
    			你好, 歡迎來到雅騰科技有限公司, 我們采用“小班現場授課”、“手把手輔導學員”的培養方式, 助你早日順利實現IT夢!
    </div>

    效果如下:

    2.jpg

    黄片基地 <