整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
近上手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小时内与您取得联系。
