當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css3实现超出文本指定行数(指定文本长度)用省略号代替

發布時間：2024/4/14 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 css3实现超出文本指定行数(指定文本长度)用省略号代替小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

測試代碼：

1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7 <meta name="apple-mobile-web-app-capable" content="yes"> 8 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 9 <meta content="telephone=no" name="format-detection"> 10 <meta content="on" http-equiv="x-dns-prefetch-control"> 11 <title>測試css3實現超出文本指定行數(指定文本長度)用省略號代替的效果</title> 12 <style> 13 .unilineText { /*設置文本為單行，如果超出長度用省略號代替*/ 14 width: 300px; 15 overflow: hidden; 16 text-overflow: ellipsis; 17 -o-text-overflow: ellipsis; 18 -webkit-text-overflow: ellipsis; 19 -moz-text-overflow: ellipsis; 20 white-space: nowrap; /*規定段落中的文本不進行換行*/ 21 } 22 23 .multiLineText { /*設置文本為多行，如果超出長度用省略號代替*/ 24 width: 200px; 25 word-break: break-all; 26 display: -webkit-box; 27 -webkit-line-clamp: 3; /*限制在一個塊元素顯示的文本的行數*/ 28 -webkit-box-orient: vertical; 29 overflow: hidden; 30 } 31 </style> 32 </head> 33 34 <body> 35 <h1>測試顯示一行文本：</h1> 36 <div class="unilineText"> 37 text-overflow: ellipsis可以用來多行文本的情況下，用省略號隱藏超出范圍的文本；white-space: nowrap規定段落中的文本不進行換行; -webkit-box-orient：vertical限制在一個塊元素顯示的文本的行數 38 </div> 39 <h1>測試兩行或者兩行以上的文本:</h1> 40 <div class="multiLineText"> 41 text-overflow: ellipsis可以用來多行文本的情況下，用省略號隱藏超出范圍的文本；white-space: nowrap規定段落中的文本不進行換行; -webkit-box-orient：vertical限制在一個塊元素顯示的文本的行數 42 </div> 43 44 </body> 45 46 </html>

這個測試代碼中，多行文本用省略號代碼只兼容webkit內核的瀏覽器，其它內核解決辦法暫時沒有找到，如果哪位大神知道請告知我，多謝！

轉載于:https://www.cnblogs.com/linJie1930906722/p/5792909.html

總結

以上是生活随笔為你收集整理的css3实现超出文本指定行数(指定文本长度)用省略号代替的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。