css設定固定高度多行超出變省略號，適用於手機端
阿新 • • 發佈：2018-11-06
基本設定：
display: -webkit-box;/** 物件作為伸縮盒子模型顯示 **/
word-break: break-all;
text-overflow: ellipsis;
-webkit-box-orient: vertical;/** 設定或檢索伸縮盒物件的子元素的排列方式 **/
-webkit-line-clamp: 3;/** 顯示的行數 **/
overflow: hidden;帶相容方案的：http://www.css88.com/archives/5206
以上多行文字省略方案並不完美，當想要設定固定高度並且文字超出顯示的行（-webkit-line-clamp）時，雖然會在固定行顯示省略號，但是省略號後面還會有文字顯示：
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .inner { border: 1px solid; min-height: 150px; display: -webkit-box; width: 200px; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; word-break: break-all; overflow: hidden; } </style> </head> <body> <div class="inner">會計3年挪用公款270多萬 一人貪腐4名領導被問責會計3年挪用公款270多萬 一人貪腐4名領導被問責</div> </body> <script> </script> </html>
解決辦法：可以用一個父元素包裹，將固定高度設定在父元素上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .outer { width: 200px; min-height: 150px; border: 1px solid; } .inner { display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; word-break: break-all; overflow: hidden; } </style> </head> <body> <div class="outer"> <div class="inner">會計3年挪用公款270多萬 一人貪腐4名領導被問責會計3年挪用公款270多萬 一人貪腐4名領導被問責</div> </div> </body> <script> </script> </html>
