日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
深入擴展文本溢出解決方案

 在實際的開發(fā)中不管是移動端還是 PC 端都會遇到文本太長，因為寬度不夠導致我們需要設置成省略號。文本就文本溢出做一個總結，希望對你們開發(fā)過程中有幫助。

公司主營業(yè)務：成都網(wǎng)站設計、成都網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出金湖免費做網(wǎng)站回饋大家。

閱讀本文你將看到如下幾部分內(nèi)容:

  • 單行文本溢出
  • 多行文本溢出
  • 拓展的多行文本溢出
  • 自定義多行文本溢出

高亮多行文本溢出

單行文本溢出一行文本超出顯示是一個最基本的超出最大寬度，顯示省略號[1]，效果如圖所示

這個效果通過 css 就可以實現(xiàn)，代碼如下：

 
 
 
 
    
  
  
  
  
  1. width: 300px; 
    2. 
  
  
  
  
  2. overflow: hidden; 
    3. 
  
  
  
  
  3. white-space: nowrap; 
    4. 
  
  
  
  
  4. text-overflow: ellipsis; 
    5. 
  
  
  
  
  5. border:2px solid greenyellow; 
    6.

兼容性一片綠呀，基本上所有的瀏覽器都支持

多行文本溢出

這個效果也可以通過 css 來實現(xiàn)

 
 
 
 
    
  
  
  
  
  1. width: 100px; 
    2. 
  
  
  
  
  2. overflow: hidden; 
    3. 
  
  
  
  
  3. text-overflow: ellipsis; 
    4. 
  
  
  
  
  4. display: -webkit-box; 
    5. 
  
  
  
  
  5. -webkit-line-clamp: 3; 
    6. 
  
  
  
  
  6. -webkit-box-orient: vertical; 
    7. 
  
  
  
  
  7. border: 2px solid greenyellow; 
    8.

如果將 display: -webkit-box 和 text-overflow: ellipsis 配合使用，文本將以省略號結尾。

line-clamp 設置文本顯示的行數(shù)

box-orient 設置元素的排列方式

但是如果我們輸入的內(nèi)容是英文，如下圖所示：

我們會發(fā)現(xiàn)英文沒有如我所愿，顯示 3 行。因為英文是不會自動換行的，所以我們需要設置換行

 
 
 
 
    
  
  
  
  
  1. word-wrap: break-word; //允許長單詞換行到下一行 
    2. 
  
  
  
  
  2. word-break: break-all; //允許在單詞內(nèi)換行 
    3.

效果如下

兼容性:該方法不適用于 IE 瀏覽器。

改變思路采用定位+偽類方法

 
 
 
 
    
  
  
  
  
  1. div { 
    2. 
  
  
  
  
  2.   position: relative; 
    3. 
  
  
  
  
  3.   line-height: 20px; 
    4. 
  
  
  
  
  4.   max-height: 60px; 
    5. 
  
  
  
  
  5.   overflow: hidden; 
    6. 
  
  
  
  
  6.   word-break: break-all; 
    7. 
  
  
  
  
  7. } 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9. div::after { 
    10. 
  
  
  
  
  10.   content: "..."; 
    11. 
  
  
  
  
  11.   position: absolute; 
    12. 
  
  
  
  
  12.   bottom: 0; 
    13. 
  
  
  
  
  13.   right: 0; 
    14. 
  
  
  
  
  14.   padding-left: 40px; 
    15. 
  
  
  
  
  15.   background: -webkit-linear-gradient(left, transparent, #fff 55%); 
    16. 
  
  
  
  
  16.   background: -o-linear-gradient(right, transparent, #fff 55%); 
    17. 
  
  
  
  
  17.   background: -moz-linear-gradient(right, transparent, #fff 55%); 
    18. 
  
  
  
  
  18.   background: linear-gradient(to right, transparent, #fff 55%); 
    19. 
  
  
  
  
  19. } 
    20.
  • 使用 line-height 和 max-height 來限制顯示的行數(shù)，word-break 是設置英文單詞允許單詞內(nèi)換行;
  • 在::after 中使用 background: linear-gradient 而不直接使用 background 可以避免文字顯示不全的問題;
  • ::after 在 ie8 不支持可以采用:after,如果在 ie6，7 時,::after 可以換成真實元素來替換如

效果如下：

兼容性

也可以使用封裝好的庫clamp-js-main[2]

 
 
 
 
    
  
  
  
  
  1. npm i clamp-js-main 
    2. 
 
 
 
 

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3.

效果如下：

拓展的多行文本溢出

在支持了多行文本溢出顯示省略號的功能之后，產(chǎn)品同學又發(fā)現(xiàn)體驗不友好的點，如下圖所示，文本在第二行開頭處就結束了,這就導致第二行大部分是空白的內(nèi)容，影響了美觀度。

因此，產(chǎn)品同學提出了一個新需求：

  • 當文本沒有超過第 x 行的一半時，則按第 x-1 行溢出顯示省略號的方式展示;(第 1 行除外)
  • 當文本超過第 x 行的一半但沒有超過第 x 行時，則正常展示;
  • 當文本超過第 x 行時，則按第 x 行溢出顯示省略號的方式展示。

這就需要計算出文本實際占用的寬度才能選擇采用哪種展示方式。

查找資料得知，canvas 提供了一個measureText[3]的方法，該方法的返回包含一個對象，這個對象里包含了以像素計的指定字體寬度。

于是可以基于canvas[4]能力來實現(xiàn)這個功能，大概的流程圖如下圖所示。

這里最關鍵的是要計算出每一行可以顯示多少文本，利用 canvas 的 measureText 方法，可以達到這個效果，代碼如下

 
 
 
 
    
  
  
  
  
  1.  
    2. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. //處理文字多出省略號顯示 
    2. 
  
  
  
  
  2. function dealWords(options) { 
    3. 
  
  
  
  
  3.   options.ctx.font = options.fontSize + "px Arial";//設置字體大小 
    4. 
  
  
  
  
  4.   var allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth);//實際總共能分多少行 
    5. 
  
  
  
  
  5.   var count = allRow >= options.maxLine ? options.maxLine : allRow;//實際能分多少行與設置的最大顯示行數(shù)比，誰小就用誰做循環(huán)次數(shù) 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.   var endPos = 0;//當前字符串的截斷點 
    8. 
  
  
  
  
  8.   let textArr = []; 
    9. 
  
  
  
  
  9.   for (var j = 0; j < count; j++) { 
    10. 
  
  
  
  
  10.     var nowStr = options.word.slice(endPos);//當前剩余的字符串 
    11. 
  
  
  
  
  11.     var rowWid = 0;//每一行當前寬度 
    12. 
  
  
  
  
  12.     if (options.ctx.measureText(nowStr).width > options.maxWidth) {//如果當前的字符串寬度大于最大寬度，然后開始截取 
    13. 
  
  
  
  
  13.       for (var m = 0; m < nowStr.length; m++) { 
    14. 
  
  
  
  
  14.         rowWid += options.ctx.measureText(nowStr[m]).width;//當前字符串總寬度 
    15. 
  
  
  
  
  15.         if (rowWid > options.maxWidth) { 
    16. 
  
  
  
  
  16.           if (j === options.maxLine - 1) { //如果是最后一行 
    17. 
  
  
  
  
  17.             textArr.push(nowStr.slice(0, m - 1) + '...'); 
    18. 
  
  
  
  
  18.             options.ctx.fillText(nowStr.slice(0, m - 1) + '...', options.x, options.y + (j + 1) * 18);    //(j+1)*18這是每一行的高度 
    19. 
  
  
  
  
  19.           } else { 
    20. 
  
  
  
  
  20.             textArr.push(nowStr.slice(0, m)) 
    21. 
  
  
  
  
  21.             options.ctx.fillText(nowStr.slice(0, m), options.x, options.y + (j + 1) * 18); 
    22. 
  
  
  
  
  22.           } 
    23. 
  
  
  
  
  23.           endPos += m;//下次截斷點 
    24. 
  
  
  
  
  24.           break; 
    25. 
  
  
  
  
  25.         } 
    26. 
  
  
  
  
  26.       } 
    27. 
  
  
  
  
  27.     } else if (options.ctx.measureText(nowStr).width > options.maxWidth / 2 && options.ctx.measureText(nowStr).width < options.maxWidth) {//如果當前的字符串寬度小于最大寬度就直接輸出 
    28. 
  
  
  
  
  28.       textArr.push(nowStr.slice(0)); 
    29. 
  
  
  
  
  29.       options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 18); 
    30. 
  
  
  
  
  30.     } else { 
    31. 
  
  
  
  
  31.       if (j > 0) { 
    32. 
  
  
  
  
  32.         if (options.ctx.measureText(nowStr).width < options.maxWidth / 2) { 
    33. 
  
  
  
  
  33.           document.getElementById('myCanvas').height = 150; 
    34. 
  
  
  
  
  34.           options.ctx.font = options.fontSize + "px Arial";//設置字體大小 
    35. 
  
  
  
  
  35.           textArr.push(nowStr.slice(0)); 
    36. 
  
  
  
  
  36.           for (let n = 0; n < textArr.length - 1; n++) { 
    37. 
  
  
  
  
  37.             if (n == j - 1) { 
    38. 
  
  
  
  
  38.               options.ctx.fillText(textArr[n].slice(0, textArr[n].length - 1) + "...", options.x, options.y + (n + 1) * 18); 
    39. 
  
  
  
  
  39.             } else { 
    40. 
  
  
  
  
  40.               options.ctx.fillText(textArr[n], options.x, options.y + (n + 1) * 18); 
    41. 
  
  
  
  
  41.             } 
    42. 
  
  
  
  
  42.  
    43. 
  
  
  
  
  43.           } 
    44. 
  
  
  
  
  44.         } 
    45. 
  
  
  
  
  45.       }else{ 
    46. 
  
  
  
  
  46.         options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 18); 
    47. 
  
  
  
  
  47.       } 
    48. 
  
  
  
  
  48.     } 
    49. 
  
  
  
  
  49.   } 
    50. 
  
  
  
  
  50. } 
    51. 
 
 
 
 

 
 
 
 
    
  
  
  
  
  1. var ctx = document.getElementById('myCanvas').getContext('2d'); 
    2. 
  
  
  
  
  2. var name = '前端簡報，前端簡報，前端簡報，前端簡報，前端簡報，前端簡報，前端簡報，前端。'; 
    3. 
  
  
  
  
  3. this.dealWords({ 
    4. 
  
  
  
  
  4.   ctx: ctx,//畫布上下文 
    5. 
  
  
  
  
  5.   fontSize: 18,//字體大小 
    6. 
  
  
  
  
  6.   word: name,//需要處理的文字 
    7. 
  
  
  
  
  7.   maxWidth: 300,//一行文字最大寬度 
    8. 
  
  
  
  
  8.   x: 0,//文字在x軸要顯示的位置 
    9. 
  
  
  
  
  9.   y: 0,//文字在y軸要顯示的位置 
    10. 
  
  
  
  
  10.   maxLine: 3//文字最多顯示的行數(shù) 
    11. 
  
  
  
  
  11. }) 
    12.

 效果圖 當文本沒有超過第 x 行的一半時，則按第 x-1 行溢出顯示省略號的方式展示;(第 1 行除外)

當文本超過第 x 行的一半但沒有超過第 x 行時，則正常展示;

當文本超過第 x 行時，則按第 x 行溢出顯示省略號的方式展示。

兼容性

自定義多行文本溢出

過一段時間之后，產(chǎn)品同學又提出了新的進階版需求

  • 文本的首行開頭需要縮進或者可以配置一個圖標;
  • 文本的末尾可以配置按鈕或者圖標，并且如果文本超過了范圍需要顯示省略號，但是省略號需要在按鈕或圖標的前面。

類似于如圖所示：

推薦兩個封裝好的組件

HeyUI：https://www.heyui.top/component/other/textellipsis[5]

vue-text-ellipsis：https://github.com/Luobata/vue-text-ellipsis[6]

它們的思路都是通過最終展示的實際高度是否超過預期的容器高度來判斷是否需要刪減文本。其流程圖大概如下圖所示。

就這樣，通過現(xiàn)成的組件就解決了一個難題。

高亮多行文本溢出

有些文本表達的意思可能比較重要，這就需要重點引起用戶的注意。

而有些文本表達的意思可能重要程度一般，這就不需要用戶注意。

于是乎她們又提出了一個通過高亮文本來提升用戶體驗的需求：

  • 能夠根據(jù)文本的標記進行高亮展示

比方說，獲取到下面一段文本，它要顯示出入下圖所示的那樣高亮效果[7]。

由于文本高亮需要通過標簽將文本包裹起來并添加高亮樣式才能實現(xiàn)，而之前的組件是通過 v-text 的方式實現(xiàn)的，因此這里不能直接使用，需要將組件改造成 v-html 的方式插入才可以。

假如通過 v-html 插入文本，并且設置了 em 標簽的樣式，那么就會有一個問題，組件是通過循環(huán)剔除最后一個字符直到實際高度小于容器高度來實現(xiàn)展示功能的，這就有可能截掉標簽字符，導致最后的展示有異常。

所以，在截取文本的時候還需要做一些處理，流程圖如下圖所示。

到這里，已經(jīng)實現(xiàn)文本的一種高亮形式了，但是假如有好幾個部分的文本需要高亮且高亮的樣式還各不相同，這又要怎么解決呢?

一種思路是，通過幾種不同名稱的標簽分別包裹需要高亮的文本，每一種標簽會對應一種高亮樣式，這樣的話，在獲得源文本后，首先通過詞法分析將源文本中的標簽解析出來，后面的流程就跟上圖步驟 1 后面的流程類似了。

參考資料

[1]css 多行文字溢出打點省略號: https://blog.csdn.net/c_kite/article/details/81486953

[2]clamp-js-main: https://www.npmjs.com/package/clamp-js-main

[3]measureText: https://www.w3school.com.cn/tags/canvas_measuretext.asp

[4]微信小程序之canvas 文字斷行和省略號顯示: https://www.cnblogs.com/zjjDaily/p/9956848.html

[5]https://www.heyui.top/component/other/textellipsis: https://www.heyui.top/component/other/textellipsis

[6]https://github.com/Luobata/vue-text-ellipsis: https://github.com/Luobata/vue-text-ellipsis

[7]淺談移動端過長文本溢出顯示省略號的實現(xiàn)方案: https://mp.weixin.qq.com/s?__biz=MzI4NjY4MTU5Nw==&mid=2247486441&idx=2&sn=ce5cc6ba16db4d022f6768bcf896abed&chksm=ebd87b7bdcaff26da481dca06b58a96c8f4162bccbb571296c7568b45d80af549df1c520a1a7&token=69805300&lang=zh_CN#rd

 【編輯推薦】

  1. 一文教你探測虛擬環(huán)境是物理機、虛擬機還是容器？
  2. 比較9款代碼質(zhì)量工具，看看哪款更好用
  3. 推薦十個好用的程序員摸魚網(wǎng)站，現(xiàn)在就給我玩起來！
  4. 2021年網(wǎng)絡安全趨勢：更高的預算，重點終端和云安全
  5. 為什么碼農(nóng)不應該在面試中同意進行編程測試

文章題目：深入擴展文本溢出解決方案
分享地址：http://m.5511xx.com/article/dhccgpo.html