前言
身为一个马上实习的普通大学生,现在感觉万般迷茫与无奈,迷茫实习的生活和工作,无奈改变不了自己的状况。至此,写这篇文章的目的是为了以后自己再遇到坑的时候,不用再浪费时间查找
目录
二、文本一行或两行显示,超过的用省略号展示(理解不理解都一样,反正Ctrl c v都能用
一、uni-app内使用vant插件(通用大部分插件)
1.1 使用vant插件
找了半天百度,在这个大佬的GitHub上把dist文件夹下载到项目里,创建个wxcomponents文件夹,把dist弄里边,然后在page.json里的全局配置里配置一下需要引入的组件
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#D52525",
"backgroundColor": "#F8F8F8",
"usingComponents":{
"van-button":"@/wxcomponents/vant/button/index"
}
},
youzan/vant-weapp: 轻量、可靠的小程序 UI 组件库 (github.com)https://github.com/youzan/vant-weapp
1.2 uniapp 使用uniCloud里的插件
在这个插件市场能找到需求的大部分插件,搜索点击,然后点击 使用HBulider X 导入插件,
然后接着点就行了
DCloud 插件市场https://ext.dcloud.net.cn/
二、文本一行或两行显示,超过的用省略号展示(理解不理解都一样,反正Ctrl c v都能用
/* 没展示完的字用。。。代替 */
.two-txt {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
text-overflow: ellipsis;
下边是W3school教程关于它的描述:
值 | 描述 |
---|---|
clip | 修剪文本 |
ellipsis | 显示省略符号来代表被修剪的文本 |
string | 使用给定的字符串来代表被修剪的文本 |
但是,只是使用这个属性的话,是不能用的,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>杨帆向海</title>
</head>
<style>
.text{
text-overflow: ellipsis;
}
.q{
width: 200px;
height: 50px;
background-color: lightgrey;
}
</style>
<body>
<div class="q">
<p class="text">
不变不变不变不变不变不变不变不变不变不变不变不变不变不变不变
</p>
</div>
</body>
<script>
</script>
</html>
text-overflow: ellipsis; 通常在以下情况下才生效:
① 元素的宽度必须使用px(pixels),百分比不工作
② 元素必须设置 overflow:hidden;
所以overflow:hidden;,用来溢出隐藏,在别的情况下还有别的用处,比如防止外边距塌陷等等,当然,如果想选择让几行溢出隐藏的话,把-webkit-line-clamp: 2;的值改成几行就行了,至于剩下的两个属性 -webkit-box-orient: vertical; 和 display: -webkit-box;,查了很好长时间了百度没查出来什么意思。以后知道再来更新。