html中文字溢出處理(text-overflow)


文字溢出處理有兩種方式:

一、css

            overflow:hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

二、js方法

          控制字符個數,超出部分這不顯示

 以下為示例demo.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>text test</title>
 6     <style>
 7         .wrapper{
 8             display:flex;
 9             flex-direction: row;
10             justify-content: space-between;
11             width: 1000px;
12             height:300px;
13             margin:100px auto;
14         }
15         .wrapper p{
16             width: 300px;
17             height:auto;
18             padding:20px;
19             border:1px solid #ddd;
20             box-sizing: border-box;
21         }
22         .wrapper p:nth-child(1){
23             overflow:hidden;
24             white-space: nowrap;
25             text-overflow: ellipsis;
26         }
27         .wrapper p:nth-child(2){
28             overflow:hidden;
29             text-overflow: ellipsis;
30             display:-webkit-box;
31             -webkit-box-orient: vertical;
32             -webkit-line-clamp:2;  /* 限制在一個塊元素顯示的文本的行數。*/
33         }
34     </style>
35 </head>
36 <body>
37 <div class="wrapper">
38     <p>青春易逝,容顏易老,即使是平常光鮮亮麗的明星也會有容顏老去的一天,但明星們可不願意承認自己已經老了事實,即使是已經奔三奔四的年齡了,還總愛扮嫩。今天我們就來看看年過半百還扮嫩的幾位女星。</p>
39     <p>青春易逝,容顏易老,即使是平常光鮮亮麗的明星也會有容顏老去的一天,但明星們可不願意承認自己已經老了事實,即使是已經奔三奔四的年齡了,還總愛扮嫩。今天我們就來看看年過半百還扮嫩的幾位女星。</p>
40     <p id="textover">青春易逝,容顏易老,即使是平常光鮮亮麗的明星也會有容顏老去的一天,但明星們可不願意承認自己已經老了事實,即使是已經奔三奔四的年齡了,還總愛扮嫩。今天我們就來看看年過半百還扮嫩的幾位女星。</p>
41 </div>
42 
43 <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
44 <script type="text/javascript">
45     $(document).ready(function(){
46         var textLgth = 20;
47         var textCur = $("#textover").text().length;
48         if(textCur > textLgth){
49             $("#textover").text($("#textover").text().substring(0,textLgth));
50             $("#textover").html($("#textover").html()+'...')
51         }
52     });
53     
54 </script>
55 </body>
56 </html>

最后頁面展示


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM