文字溢位處理為省略號（多行、單行）
阿新 • • 發佈：2018-11-26
文字溢位處理
一、單行文字溢位處理
效果圖：
html程式碼：
<body>
<div class="text">vukfjygfvhjvfgdtryutfvghdfkjgfdhgfhjgdfdgj</div>
<div class="text">除服可以廣泛不UK研發與來訪不給劉亦菲不各領域和不根本不超過好久</div>
</body>
css程式碼：
.text { width: 200px; background: #668770; font-size: 24px; margin: 30px auto; white-space: nowrap; /*設定文字不換行*/ overflow: hidden; /*設定超出部分隱藏*/ text-overflow: ellipsis; /*設定超出部分以引號形式渲染頁面*/ /*display: -webkit-box;*/ /*-webkit-line-clamp: 2;*/ /*-webkit-box-orient: vertical;*/ /*word-break: break-all;*/ }
多行文字溢位處理
效果圖：
html程式碼：(同上)
<body>
<div class="text">vukfjygfvhjvfgdtryutfvghdfkjgfdhgfhjgdfdgj</div>
<div class="text">除服可以廣泛不UK研發與來訪不給劉亦菲不各領域和不根本不超過好久</div>
</body>
css程式碼：
.text { width: 200px; background: #668770; font-size: 24px; margin: 30px auto; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /*表示從第2行之後開始處理（超出第2行）*/ -webkit-box-orient: vertical; /*以垂直方向處理文字*/ word-break: break-all; /* 給英文加換行效果*/ }
注意：
- 中文預設換行，英文預設不換行；
- 設定中文不換行：white-space: nowrap;
- 設定英文換行：word-break: break-all;
請多指教~謝謝！