近上手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頁面中如何讓單行文本以及多行文本溢出顯示省略號(…)。
當我們在編寫網頁代碼的時候,肯定會遇到過文字列表中的文字太多超出了我們所寫的寬度,導致文本換行或者文本超出了界限,這時有人就會說了,讓后臺限制一下調用的文字個數不就行了嗎,但是我們在做響應式的時候由于是百分比布局,無法計算一行會顯示多少個文字,所以這并不是一個好的解決方案,我們使用css3就可以輕松的實現,而且簡單好用。
核心css語句:
1、overflow:hidden; (顧名思義超出限定的寬度就隱藏內容)
2、white-space: nowrap; (設置文字在一行顯示不能換行)
3、text-overflow: ellipsis;(規定當文本溢出時顯示省略符號來代表被修剪的文本)
我們具體的代碼效果演示就如下圖所示:(設置ul寬度為300,超出的文字內容讓其自動隱藏并顯示...)
我們在編寫網頁代碼時,有時候新聞列表頁中新聞簡介可能有一行或者多行,我們要如何處理這種問題,讓其超出多行后還能顯示省略號呢,不要慌,我們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瀏覽器或移動端*/
.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;
}
遇到這種問題,面試官的關注點更多是在于如何實現多行文本省略號處理,并且兼容性比較好。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。