Jonas Schmedtmann
文本超出显示省略号
- 单行文本
h1{
width:100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
2.多行文本
h1{
white-space: nowrap;
display: -webkit-box;//对象作为弹性伸缩盒子模型显示
overflow: hidden;//溢出隐藏
-webkit-box-orient: vertical;//设置伸缩盒子对象的子元素的排列方式
-webkit-line-clamp: 2;//设置 块元素包含的文本行数
}
兼容
vant input placeholder 样式修改
less
/deep/ .van-field__control {
&::-webkit-input-placeholder {
color: #999999 !important;
}
}
sess
::v-deep .van-field__control {
&::-webkit-input-placeholder {
color: #999999 !important;
}
}
SVG图片颜色设置无效解决方法
父元素设置red无效，因为<path>标签的最后默认设置了blue，此时该svg图片是 蓝色的
<div style="color: red">
<svg width="1em" height="1em" viewBox="0 0 1024 1024">
<path d="M863.1 518.5H505.5V160.9c0-4.4-3.6-8-8..." fill="blue"/>
</svg>
</div>
改为以下代码即可，svg图片 红色生效：
1.svg标签中加入 fill="currentColor"
2.path标签中去掉 fill="blue" (fill属性 通常在path标签的末端)
<div style="color: red">
<svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
<path d="M863.1 518.5H505.5V160.9c0-4.4-3.6-8-8..." />
</svg>
</div>
在CSS中创建一个遮罩层并阻止点击穿透的常见方案
- 使用
position: fixed和z-index：创建一个具有全屏尺寸的<div>元素，并将其设置为position: fixed，top: 0，left: 0，width: 100%，height: 100%，然后使用z-index将其放在其他元素之上。通过设置透明度、背景颜色或使用其他视觉效果，可以实现遮罩层的效果。这样的遮罩层将位于所有其他内容的顶部，并阻止点击事件穿透到下面的元素。
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
- 使用
pointer-events：通过将遮罩层元素的pointer-events属性设置为auto或none，可以控制其是否接受鼠标事件。将其设置为auto会启用鼠标事件，而将其设置为none则会禁用鼠标事件。通过将遮罩层设置为不接受鼠标事件，可以防止点击事件穿透到下面的元素。
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
pointer-events: none;
}
p.s 通过background-color: rgba(0, 0, 0, 0.5);设置的遮罩透明度与opacity属性设置的有啥不同?
通过 `` 设置遮罩层的透明度与使用透明度属性设置的方式有一些不同。
- ``：这种方式通过使用 RGBA 颜色值来设置遮罩层的背景颜色，并通过最后一个参数（alpha 值）来控制透明度。在这种情况下，遮罩层的透明度会直接应用于其背景颜色，而不会影响遮罩层上其他内容的透明度。
- 透明度属性：CSS 提供了
opacity属性用于控制元素的透明度。将透明度属性应用于遮罩层元素时，不仅会影响其背景颜色的透明度，还会影响遮罩层上其他内容的透明度。换句话说，透明度属性会同时影响遮罩层的背景和内容的透明度。
例如，如果遮罩层上有文本或其他元素，并且将透明度属性设置为 0.5，那么除了背景颜色变为半透明外，遮罩层上的文本或其他元素也会变得半透明。这可能不是您想要的效果。
因此，如果您只想要调整遮罩层的背景颜色的透明度，而不影响其他内容的透明度，使用 background-color: rgba(0, 0, 0, 0.5); 是更合适的选择。
flex布局间隔
body{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.item{
background-color: pink;
padding-bottom: 100%;
}
@media (max-width: 1024px){
body{
grid-template-columns: repeat(3, 1fr);
}
}
<body>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</body>
