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

 

單行文本：方法/步驟

1. 1

   根據自己的需求編寫好模塊（如果你不是新手，直接看第二步！）

   HTML代碼：

   <div class="demo"><p>內容</p></div>

   CSS代碼：

   .demo{

   width: 300px; height: 30px; 

   line-height: 30px; 

   border: 1px solid #ddd;

   border-radius: 3px;

   margin: 50px auto;

   padding: 0 10px;

   }

2. 2

   設置單行文本超出範圍後隱藏溢出並增加省略號...

   CSS代碼：

   .texthide{

   overflow: hidden;

   text-overflow: ellipsis;

   white-space: nowrap;

   }

   END

多行文本溢出：方法/步驟

1. 根據自己的需求編寫好模塊（如果你不是新手，直接看第二步！）

   HTML代碼：<div class="demo"><p>內容</p></div>

   CSS代碼：

   .demo{

   width: 300px; height: 90px; 

   line-height: 30px; 

   border: 1px solid #ddd;

   border-radius: 3px;

   margin: 50px auto;

   padding: 0 10px;

   }

2. 設置多行文本超出範圍後隱藏溢出並增加省略號...

   核心代碼：

   .texthide{

   display: -webkit-box;

   -webkit-box-orient: vertical;

   -webkit-line-clamp: 3;

   overflow: hidden;

   }