近上手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渲染的效果。

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

圖：

關鍵點：

• 文本超出了隱藏

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;
        }

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