<dd id="t699n"></dd>

  • <em id="t699n"></em>

    1. <dd id="t699n"></dd>

      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

      黄网站免费 <