整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          java實現多行html文本轉換成單行文本,用QQ小

          java實現多行html文本轉換成單行文本,用QQ小程序插件渲染顯示


          近上手QQ小程序,想展示文章內容,無奈自己沒有服務器、數據庫,QQ小程序又沒有云函數,怎么辦呢?

          只能把文章內容存放在小程序頁面data中了,但是一篇文章幾十行、甚至上百行,有的還有圖片。

          于是乎找了個富文本編輯器,把文本內容輸入、格式調好在轉換成HTML內容。看下圖。

          然后再轉成HTML內容。

          但是直接復制過去吧,看下圖,得一行行的縮進,比較麻煩。

          索性就寫一段java代碼把多行文本轉換成一行文本,話不多說,看代碼。

          public static void main(String[] args) {
          
          String path="G:\\one.txt";//文件路徑
          
          //讀取多行文本轉換為一行文本
          
          String content=InTextOut.readFileContent(path);
          
          //再把一行文本輸出到文本中
          
          String finallyPath="G:\\finall.txt";
          
          InTextOut.wirteContentFile(finallyPath, content);
          
          }
          
          public static void wirteContentFile(String path,String content){
          
          BufferedWriter buffWriter=null;
          
          try {
          
          FileWriter fileWriter=new FileWriter(path);
          
          buffWriter=new BufferedWriter(fileWriter);
          
           buffWriter.write(content);
          
          } catch (Exception e) {
          
          e.printStackTrace();
          
          }finally{
          
          if(buffWriter!=null){
          
          try {
          
          buffWriter.close();
          
          } catch (IOException e) {
          
          e.printStackTrace();
          
          }
          
          }
          
          }
          
          }
          
          public static String readFileContent(String fileName) {
          
           File file=new File(fileName);
          
           BufferedReader reader=null;
          
           StringBuffer sbf=new StringBuffer();
          
           try {
          
           reader=new BufferedReader(new FileReader(file));
          
           String tempStr;
          
           while ((tempStr=reader.readLine()) !=null) {
          
           sbf.append(tempStr);
          
           }
          
           reader.close();
          
           return sbf.toString();
          
           } catch (IOException e) {
          
           e.printStackTrace();
          
           } finally {
          
           if (reader !=null) {
          
           try {
          
           reader.close();
          
           } catch (IOException e1) {
          
           e1.printStackTrace();
          
           }
          
           }
          
           }
          
           return sbf.toString();
          
          }

          多行文本轉換前后比較。

          現在復制單行文本到data中就簡單多了。

          看看用towxml插件把html轉換成wxml渲染的效果。

          本文系作者原創,轉載請注明出處。

          篇文章主要給大家介紹一下在html頁面中如何讓單行文本以及多行文本溢出顯示省略號(…)。

          1)單行文本溢出顯示省略號

          當我們在編寫網頁代碼的時候,肯定會遇到過文字列表中的文字太多超出了我們所寫的寬度,導致文本換行或者文本超出了界限,這時有人就會說了,讓后臺限制一下調用的文字個數不就行了嗎,但是我們在做響應式的時候由于是百分比布局,無法計算一行會顯示多少個文字,所以這并不是一個好的解決方案,我們使用css3就可以輕松的實現,而且簡單好用。

          核心css語句:

          1、overflow:hidden; (顧名思義超出限定的寬度就隱藏內容)

          2、white-space: nowrap; (設置文字在一行顯示不能換行)

          3、text-overflow: ellipsis;(規定當文本溢出時顯示省略符號來代表被修剪的文本)

          我們具體的代碼效果演示就如下圖所示:(設置ul寬度為300,超出的文字內容讓其自動隱藏并顯示...)

          2)多行文本溢出顯示省略號

          我們在編寫網頁代碼時,有時候新聞列表頁中新聞簡介可能有一行或者多行,我們要如何處理這種問題,讓其超出多行后還能顯示省略號呢,不要慌,我們css還是很強大的,已經給我們提供了方法來處理這種問題了。

          核心css語句:

          1、-webkit-line-clamp:2; (用來限制在一個塊元素顯示的文本的行數,2表示最多顯示2行。 為了實現該效果,它需要組合其他的WebKit屬性)

          2、display: -webkit-box; (和1結合使用,將對象作為彈性伸縮盒子模型顯示 )

          3、-webkit-box-orient:vertical;( 和1結合使用 ,設置或檢索伸縮盒對象的子元素的排列方式 。)

          4、overflow:hidden; (顧名思義超出限定的寬度就隱藏內容)

          5、text-overflow: ellipsis;(規定當文本溢出時顯示省略符號來代表被修剪的文本)

          我們具體的代碼效果演示就如下圖所示:(設置段落p寬度為300,超出2行的文字內容讓其自動隱藏并顯示...)

          好了,本篇文章就給大家說到這里,大家自己下來可以自己找例子寫一下試一試到底能不能實現我們所說的效果,以后在寫頁面的的遇到這種問題的時候直接復制使用即可。

          每日金句:必須從過去的錯誤學習教訓而非依賴過去的成功。喜歡我的文章的小伙伴記得關注一下哦,每天將為你更新最新知識。

          圖:


          關鍵點:

          • 文本超出了隱藏
          overflow: hidden;
          • 超出部分使用...代替
          text-overflow: ellipsis;
          • 默認文本是自動換行的,如果是單行的話,要阻斷自動換行
          white-space: nowrap;

          實現單行文本超出省略:

                  .p1 {
                      /* 超出隱藏 */
                      overflow: hidden;
                      /* 設置文本不自動換行 (默認會自動換行)*/
                      white-space: nowrap;
                      /* 設置超出的部分如何顯示 */
                      text-overflow: ellipsis;
                  }

          實現多行文本超出省略:

          • 在WebKit瀏覽器或移動端(兼容性不太好)
            /*在WebKit瀏覽器或移動端*/       
          .p2 {
                      /* 超出隱藏 */
                      overflow: hidden;
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      /* 設置行數 */
                      -webkit-line-clamp: 2;
                      /* 設置超出的部分如何顯示 */
                      text-overflow: ellipsis;
                  }
                  /* 兼容性比較好的 */
                  .p3 {
                      position: relative;
                      line-height: 40px;
                      height: 120px;
                      overflow: hidden;
                  }
                  .p3::after {
                      content: '...';
                      position: absolute;
                      bottom: 0;
                      right: 0;
                      background: #fff;
                  }
          • 使用偽元素處理(兼容性好)

          高度=行高*行數

                  .p3 {
                      position: relative;
                      line-height: 40px;
                    /*??????????*????????????????3
                      height: 120px;
                      overflow: hidden;
                  }
                  .p3::after {
                      content: '...';
                      position: absolute;
                      bottom: 0;
                      right: 0;
                      background: #fff;
                  }

          遇到這種問題,面試官的關注點更多是在于如何實現多行文本省略號處理,并且兼容性比較好。


          主站蜘蛛池模板: 一区二区免费在线观看| 日韩精品国产一区| 97精品国产福利一区二区三区| 日韩久久精品一区二区三区| 国产韩国精品一区二区三区| 一区一区三区产品乱码| 国产在线精品一区二区中文| 日本免费精品一区二区三区| 影院成人区精品一区二区婷婷丽春院影视 | 亚洲日本一区二区三区在线不卡 | 无码中文字幕乱码一区| 日本一区二区三区精品中文字幕| 无码一区二区三区亚洲人妻 | 激情综合一区二区三区| 人妻内射一区二区在线视频| 亚洲AV无码一区二区一二区| 久久高清一区二区三区| 91福利视频一区| 激情亚洲一区国产精品| 亚洲一区二区三区国产精华液| 精品一区二区三区在线播放视频| 精品无码AV一区二区三区不卡| 国产伦精品一区二区三区| 国产一区二区三区高清在线观看| 一区二区三区日本视频| 亚洲视频在线一区二区| 精品无码综合一区| 亚洲一区二区三区久久久久| 国产福利日本一区二区三区| 女人和拘做受全程看视频日本综合a一区二区视频 | 无码人妻精品一区二区蜜桃百度| 国产成人精品久久一区二区三区av| 国产伦精品一区二区三区视频金莲| 爆乳熟妇一区二区三区| 国产伦精品一区二区三区女| 久久99久久无码毛片一区二区 | 精品视频无码一区二区三区 | 中文字幕日韩精品一区二区三区| 国产一区二区三区小向美奈子 | 日韩一区二区三区精品| 国产精品一区二区av|