随记
- html显示空格和\n无效 以及 文本溢出隐藏，以… … 表示
需求：备注和正文输入框，发的啥格式就得收到啥格式的
效果：
数据：调用接口，后端传回来的格式为：
解决：
<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
