随记
<van-row>
<van-col>拒收原因:</van-col>
<van-col class="contentStyle ellipsis">
{{ xxx.reason }}
</van-col>
</van-row>
// 1. 让空格以及\n在前端页面显示
.cellStyle{
white-space: pre; // 文字展示
white-space: pre-wrap; //文本换行
}
// 2. 文本溢出隐藏
.ellipsis{
overflow: hidden; // 超出隐藏
text-overflow: ellipsis; // ...
white-space: nowrap; // 不换行
}
扩展:利用vue的指令 v-html 结合 slot 可以使用(未试验)
- 除了 … … 之外的元素
.类名:not(:first-child) {
padding-top: 10px;
vertical-align: middle;
}
扩展:CSS3选择器 :nth-child,父元素下的子元素:
① 标签/.类名:nth-child(2n){ 选取偶数标签 }
② 标签/.类名:last-child{ 选取最后一个标签}
③ 标签/.类名:nth-child(n) {父元素的第 N 个子元素 }
- 让图片和文字居中
<div>
<img src=""></img>
<span>文字</span>
</div>
img,span{
cursor: pointer; // 小手
}
- 文字加粗:font-weight:700;
- 垂直居中:display:flex; align-items:center;
- 设置按钮/盒子的弧度:border-radius:16px;
1个值:4角相等
2个值:左上右下 右上左下
3个值:左上 右上左下 右下
4个值左上 右上 右下 左下(顺时针)
- 深度选择器 deep
改变原有组件的样式:
组件标签 /deep/ 要修改的地方{ }
- 旋转XX度
旋转90度 transform:rotate(90deg)
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/195009.html