【技術(shù)實(shí)現(xiàn)步驟摘要】
本專利技術(shù)屬于計(jì)算機(jī)，尤其是涉及一種文字溢出的顯示處理方法。
技術(shù)介紹
1、當(dāng)前，高端的物理設(shè)備可以支持用戶高自由度的操作。用戶使用不同的物理設(shè)備，或者用戶對于瀏覽器窗口進(jìn)行縮放，都有可能造成布局錯位、文字錯亂等嚴(yán)重的樣式問題，所以，web前端開發(fā)必須要考慮頁面的分辨率適配問題；
2、文字溢出是其中比較復(fù)雜一種情況，這種情況需要開發(fā)者注意以下問題：文字超出容器的判斷方法、何時(shí)判斷文字是否超出容器、單行溢出與多行溢出處理方法兼容、文字提示框的顯示判斷與處理、大數(shù)據(jù)量的情況下，性能優(yōu)化。
3、目前存在比較成熟的多行文本省略插件，如jquery.dotdotdot、react-lines-ellipsis、clamp.js，都存在以下問題：對寬度高度無法持續(xù)監(jiān)聽、大規(guī)模數(shù)據(jù)處理慢、只提供樣式處理，沒有響應(yīng)事件，如果需要添加文字提示框，無法通過二次開發(fā)完成。
技術(shù)實(shí)現(xiàn)思路
1、有鑒于此，本專利技術(shù)旨在提出一種文字溢出的顯示處理方法，以至少解決
技術(shù)介紹
中的一個問題。
2、為達(dá)到上述目的，本專利技術(shù)的技術(shù)方案是這樣實(shí)現(xiàn)的：
3、一種文字溢出的顯示處理方法，包括：
4、s1、通過用戶輸入的屬性，確定顯示文字時(shí)的具體需求；
5、s2、根據(jù)不同場景觸發(fā)文字判斷是否超出容器；
6、s3、判斷文字是否溢出，若存在溢出則使用css對文字溢出的情況進(jìn)行處理；
7、s4、根據(jù)步驟s3的判斷結(jié)構(gòu)，確定是否顯示文字提示
8、進(jìn)一步的，在執(zhí)行步驟s3之前，判斷文字?jǐn)?shù)據(jù)量是否超過設(shè)定的限額，超過限額則進(jìn)行截取以提高渲染速度；
9、當(dāng)文字提示框中的數(shù)據(jù)量超出限額時(shí)，采用滾動加載技術(shù)，通過比較滾輪的scrolltop和scrollheight，當(dāng)滾輪接近底部時(shí)，動態(tài)加載新的一批數(shù)據(jù)。
10、進(jìn)一步的，在步驟s1中，具體需求包括：
11、文字顯示行數(shù)：默認(rèn)值為0，表示文字會根據(jù)容器的寬度和高度自動填充，如果設(shè)置了具體的行數(shù)，則按照行數(shù)進(jìn)行處理；
12、是否顯示提示框：默認(rèn)值為false，僅在文字溢出時(shí)顯示提示框；
13、文字單行溢出時(shí)的省略位置：中間省略或末尾省略，默認(rèn)值為tail；
14、觸發(fā)文字溢出判斷的方法：影響提示框的顯隱，需配合步驟s2中不同的觸發(fā)事件使用；
15、限額：默認(rèn)值為10000，表示文字?jǐn)?shù)量的上限，超過該限額將進(jìn)行截取，以提升性能。
16、進(jìn)一步的，在步驟s2中，根據(jù)不同場景觸發(fā)文字是否超出容器的判斷方法包括：
17、靜態(tài)場景：當(dāng)容器的高度和寬度為固定值，且顯示的數(shù)據(jù)無變化時(shí)，頁面渲染完成后即可進(jìn)行溢出判斷；
18、數(shù)據(jù)變化場景：當(dāng)容器的高度和寬度固定，但顯示數(shù)據(jù)發(fā)生變化或組件存在顯隱變化時(shí)，需在數(shù)據(jù)變化、組件顯示后，或用戶操作時(shí)觸發(fā)溢出判斷；
19、尺寸變化場景：當(dāng)容器的高度或?qū)挾劝l(fā)生變化時(shí)，監(jiān)聽其變化，并在改變時(shí)觸發(fā)溢出判斷。
20、進(jìn)一步的，在步驟s3中，通過以下方式判斷文字是否溢出：
21、判斷文字?jǐn)?shù)據(jù)量是否超過限額，超過則進(jìn)行截取，提升渲染效率；
22、使用javascript中的html?dom技術(shù)獲取容器的dom元素，比較其scrollwidth和clientwidth，以及scrollheight和clientheight，若不相等，則表示文字溢出，返回布爾值；
23、如果文字溢出且行數(shù)屬性為0，則按照容器寬度和高度填充文字，此時(shí)將行高設(shè)為固定值，以準(zhǔn)確計(jì)算最大顯示行數(shù)，若行高未固定則以字體大小的n倍作為近似值。
24、進(jìn)一步的，在步驟s3中，使用css對文字溢出的情況進(jìn)行處理的方法包括：
25、單行文字中間省略：通過偽元素::before生成一份復(fù)制的文本，并設(shè)置右浮動(float:right)與50％寬度，配合direction:rtl實(shí)現(xiàn)前置省略號效果；
26、單行文字末尾省略：采用標(biāo)準(zhǔn)的text-overflow:ellipsis樣式實(shí)現(xiàn)；
27、多行文字省略：通過-webkit-line-clamp設(shè)置最多顯示的行數(shù)，并結(jié)合偽元素::after生成省略號，對不支持-webkit-line-clamp的瀏覽器，使用偽元素控制省略號的位置，計(jì)算其top屬性以符合最大行數(shù)的布局需求。
28、進(jìn)一步的，在步驟s4中，根據(jù)步驟s3的判斷結(jié)構(gòu)，確定是否顯示文字提示框，包括：
29、當(dāng)文字溢出時(shí)顯示提示框，提示框中的文字可隨著鼠標(biāo)滾動滾動顯示超出的文字；
30、如果文字?jǐn)?shù)量超出限額，提示框中采用分頁滾動的方式逐步加載，避免一次性加載大量數(shù)據(jù)影響性能。
31、進(jìn)一步的，本方案公開了一種電子設(shè)備，包括處理器以及與處理器通信連接，且用于存儲所述處理器可執(zhí)行指令的存儲器，所述處理器用于執(zhí)行一種文字溢出的顯示處理方法。
32、進(jìn)一步的，本方案公開了一種服務(wù)器，包括至少一個處理器，以及與所述處理器通信連接的存儲器，所述存儲器存儲有可被所述至少一個處理器執(zhí)行的指令，所述指令被所述處理器執(zhí)行，以使所述至少一個處理器執(zhí)行一種文字溢出的顯示處理方法。
33、進(jìn)一步的，本方案公開了一種計(jì)算機(jī)可讀取存儲介質(zhì)，存儲有計(jì)算機(jī)程序，所述計(jì)算機(jī)程序被處理器執(zhí)行時(shí)實(shí)現(xiàn)一種文字溢出的顯示處理方法。
34、相對于現(xiàn)有技術(shù)，本專利技術(shù)所述的一種文字溢出的顯示處理方法具有以下
35、有益效果：
36、(1)本專利技術(shù)所述的一種文字溢出的顯示處理方法，實(shí)現(xiàn)了文字溢出各個場景的全支持，對于現(xiàn)在缺失的場景都有很好的支持，比如單行溢出與多行溢出轉(zhuǎn)換、文字溢出事件實(shí)時(shí)響應(yīng)、大數(shù)據(jù)文字溢出渲染緩慢；
37、(2)本專利技術(shù)所述的一種文字溢出的顯示處理方法，2.不存在瀏覽器兼容問題，資源引入負(fù)擔(dān)小。
本文檔來自技高網(wǎng)...【技術(shù)保護(hù)點(diǎn)】
1.一種文字溢出的顯示處理方法，其特征在于，包括：
2.根據(jù)權(quán)利要求1所述的一種文字溢出的顯示處理方法，其特征在于：在執(zhí)行步驟S3之前，判斷文字?jǐn)?shù)據(jù)量是否超過設(shè)定的限額，超過限額則進(jìn)行截取以提高渲染速度；
3.根據(jù)權(quán)利要求1所述的一種文字溢出的顯示處理方法，其特征在于，在步驟S1中，具體需求包括：
4.根據(jù)權(quán)利要求1所述的一種文字溢出的顯示處理方法，其特征在于，在步驟S2中，根據(jù)不同場景觸發(fā)文字是否超出容器的判斷方法包括：
5.根據(jù)權(quán)利要求1所述的一種文字溢出的顯示處理方法，其特征在于，在步驟S3中，通過以下方式判斷文字是否溢出：
6.根據(jù)權(quán)利要求5所述的一種文字溢出的顯示處理方法，其特征在于：在步驟S3中，使用CSS對文字溢出的情況進(jìn)行處理的方法包括：
7.根據(jù)權(quán)利要求1所述的一種文字溢出的顯示處理方法，其特征在于：在步驟S4中，根據(jù)步驟S3的判斷結(jié)構(gòu)，確定是否顯示文字提示框，包括：
8.一種電子設(shè)備，包括處理器以及與處理器通信連接，且用于存儲所述處理器可執(zhí)行指令的存儲器，其特征在于：所述處理器
9.一種服務(wù)器，其特征在于：包括至少一個處理器，以及與所述處理器通信連接的存儲器，所述存儲器存儲有可被所述至少一個處理器執(zhí)行的指令，所述指令被所述處理器執(zhí)行，以使所述至少一個處理器執(zhí)行如權(quán)利要求1-7任一所述的一種文字溢出的顯示處理方法。
10.一種計(jì)算機(jī)可讀取存儲介質(zhì)，存儲有計(jì)算機(jī)程序，其特征在于：所述計(jì)算機(jī)程序被處理器執(zhí)行時(shí)實(shí)現(xiàn)權(quán)利要求1-7任一項(xiàng)所述的一種文字溢出的顯示處理方法。
...【技術(shù)特征摘要】
1.一種文字溢出的顯示處理方法，其特征在于，包括：
2.根據(jù)權(quán)利要求1所述的一種文字溢出的顯示處理方法，其特征在于：在執(zhí)行步驟s3之前，判斷文字?jǐn)?shù)據(jù)量是否超過設(shè)定的限額，超過限額則進(jìn)行截取以提高渲染速度；
3.根據(jù)權(quán)利要求1所述的一種文字溢出的顯示處理方法，其特征在于，在步驟s1中，具體需求包括：
4.根據(jù)權(quán)利要求1所述的一種文字溢出的顯示處理方法，其特征在于，在步驟s2中，根據(jù)不同場景觸發(fā)文字是否超出容器的判斷方法包括：
5.根據(jù)權(quán)利要求1所述的一種文字溢出的顯示處理方法，其特征在于，在步驟s3中，通過以下方式判斷文字是否溢出：
6.根據(jù)權(quán)利要求5所述的一種文字溢出的顯示處理方法，其特征在于：在步驟s3中，使用css對文字溢出的情況進(jìn)行處理的方法包括：
...
【專利技術(shù)屬性】
技術(shù)研發(fā)人員：郭家寧，
申請(專利權(quán))人：紫光云技術(shù)有限公司，
類型：發(fā)明
國別省市：
還沒有人留言評論。發(fā)表了對其他瀏覽者有用的留言會獲得科技券。