@hzy1123581324/z-view-ui
Version:
z-view-ui是使用vue3开发的组件，开发中,有部分组件功能未实现,慎用
190 lines (180 loc) • 5.94 kB
CSS
/*字体设置*/
/********************字体大小**********************/
.fs1n{font-size: 1em;}
.fs2n{font-size: 2em;}
/*字体自适应大小*/
.fs10{font-size:10rpx}
.fs12{font-size:12rpx}
.fs14{font-size:14rpx}
.fs16{font-size:16rpx}
.fs18{font-size:18rpx}
.fs20{font-size:20rpx}
.fs22{font-size:22rpx}
.fs24{font-size:24rpx}
.fs26{font-size:26rpx}
.fs28{font-size:28rpx}
.fs30{font-size:30rpx}
.fs32{font-size:32rpx}
.fs34{font-size:34rpx}
.fs36{font-size:36rpx}
.fs38{font-size:38rpx}
.fs40{font-size:40rpx}
.fs42{font-size:42rpx}
.fs44{font-size:44rpx}
.fs46{font-size:46rpx}
.fs48{font-size:48rpx}
.fs50{font-size:50rpx}
.fs52{font-size:52rpx}
.fs54{font-size:54rpx}
.fs56{font-size:56rpx}
.fs58{font-size:58rpx}
.fs60{font-size:60rpx}
.fs62{font-size:62rpx}
.fs64{font-size:64rpx}
.fs66{font-size:66rpx}
.fs68{font-size:68rpx}
.fs70{font-size:70rpx}
.fs72{font-size:72rpx}
.fs74{font-size:74rpx}
.fs76{font-size:76rpx}
.fs78{font-size:78rpx}
.fs80{font-size:80rpx}
/*下划线，删除线，上划线*/
.f_del{text-decoration: line-through;}
.f_under{text-decoration: underline;}
/***********字体排版*******************/
.txt-c {text-align: center ;}
.txt-lf {text-align: left ;}
.txt-rg {text-align: right ;}
.f-b{font-weight: 600;}
.f-b300{font-weight: 300;}
.f-b400{font-weight: 400;}
.f-b500{font-weight: 500;}
.f-b600{font-weight: 600;}
.f-b700{font-weight: 700;}
.f-b800{font-weight: 800;}
/*缩进*/
.f_indent_1{/*缩进一字*/
text-indent: 1em;
}
.f_indent,.f_indent_2{/*缩进两字*/
text-indent:2em;
}
.f_indent_3{/*缩进3字*/
text-indent: 3em
}
/*强制不换行* 父类*/
.f_nowrap{
white-space : nowrap;
}
.f_wrap{
word-wrap:break-word;
word-break:break-all;/* 强制英文单词断行 */
}
.ellipsis{
/* display: inline-block; */
/*单行文本溢出*/
overflow: hidden;
text-overflow:ellipsis;/*文本溢出显示省略号*/
white-space:nowrap;/*文本不会换行（单行文本溢出）*/
/* max-width: 100%; */
}
/* white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;
white-space 属性设置如何处理元素内的空白
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
word-wrap: normal|break-word;
word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
normal: 只在允许的断字点换行(浏览器保持默认处理)
break-word:在长单词或URL地址内部进行换行
word-break: normal|break-all|keep-all;
word-break 属性用来标明怎么样进行单词内的断句。
normal：使用浏览器默认的换行规则。
break-all:允许再单词内换行
keep-all:只能在半角空格或连字符处换行 */
/*************限制行数**************/
.txt-line{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-wrap:break-word;
word-break: break-word;
white-space: normal;
}
/************显示两行*****************/
.txt-line2{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-wrap:break-word;
word-break: break-word;
white-space: normal
}
/************显示三行*****************/
.txt-line3{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
word-wrap:break-word;
word-break: break-word;
white-space: normal;
}
.pre-txt{
white-space: pre-line;
}
/* 首字母大写 */
.capitalize{text-transform:capitalize}
/* 字母全大写 */
.uppercase{text-transform:uppercase}
/* 字母全小写 */
.lowercase{text-transform:lowercase}
/************行高*****************/
.lh1n{line-height:1;}
.lh1n2{line-height: 1.2 ;}
.lh1n5{line-height: 1.5 ;}
.lh1n8{line-height: 1.8 ;}
.lh2n{line-height: 2;}
.lh22{line-height:22rpx ;}
.lh24{line-height:24rpx ;}
.lh26{line-height:26rpx ;}
.lh28{line-height:28rpx ;}
.lh30{line-height:30rpx ;}
.lh32{line-height:32rpx ;}
.lh34{line-height:34rpx ;}
.lh36{line-height:36rpx ;}
.lh38{line-height:38rpx ;}
.lh40{line-height:40rpx ;}
.lh42{line-height:42rpx ;}
.lh44{line-height:44rpx ;}
.lh46{line-height:46rpx ;}
.lh48{line-height:48rpx ;}
.lh50{line-height:50rpx ;}
.lh52{line-height:52rpx ;}
.lh54{line-height:54rpx ;}
.lh56{line-height:56rpx ;}
.lh58{line-height:58rpx ;}
.lh60{line-height:60rpx ;}
.lh62{line-height:62rpx ;}
.lh64{line-height:64rpx ;}
.lh68{line-height:68rpx ;}
.lh70{line-height:70rpx ;}
.lh72{line-height:72rpx ;}
.lh74{line-height:74rpx ;}
.lh76{line-height:76rpx ;}
.lh78{line-height:78rpx ;}
.lh80{line-height:80rpx ;}
.lh82{line-height:82rpx ;}
.lh84{line-height:84rpx ;}
.lh86{line-height:86rpx ;}
.lh88{line-height:88rpx ;}
.lh90{line-height:90rpx ;}