分享一些css代码片段

经验分享
4

许久没来逛论坛了，不知道你这个需求解决了吗？
我之前写过一个snippets，效果如下

000000.01 作图草稿
000000.01 作图草稿1017×599 66 KB

css如下：（各段之前有注释，可根据自己的需要更改）



/* 紧凑的嵌入———————————————————— */

/* 缩减不必要的边距 */

.markdown-preview-view .markdown-preview-sizer
.markdown-embed{
   margin-top: 0px !important;
   margin-bottom: 3px !important;
   padding-top: 0px;
   padding-bottom: 0px;

}
.markdown-preview-sizer .markdown-preview-section{
   margin: 0px !important;
   /* padding: 0px 0px !important; */
   padding-left: 5px !important;
   padding-right: 5px !important;
   padding-top: 0px !important;
   padding-bottom: 0px !important;
}

/* 嵌入页面的左侧页边距 */
.markdown-embed .markdown-preview-view{
   padding-left: 10px; 
   /* border:solid 1px #f00; */

}
  

/* 隐藏嵌入的标题 */
.markdown-embed-title,
.markdown-embed h1,
.markdown-embed h2,
.markdown-embed h3,
.markdown-embed h4,
.markdown-embed h5,
.markdown-embed h6{
   display: none !important;
}




.markdown-preview-view .markdown-embed-content > .markdown-preview-view{
   /* 设置最大显示高度 */
    /* 设为固定像素高度 */
    /* max-height: 100px !important; */
    /* 设为全文长度 */
   max-height: max-content !important;
   /* 设置最小高度 */
   /* min-height: 100px; */
   /* 设置背景颜色 */
   /* background-color: #88888822; */
   vertical-align: top !important;
   overflow: hidden;
}


/* 在嵌入的文件前显示来源  显示宽度为5em 根据实际情况可采用40px之类的值 超出部分隐藏*/
/* 不要的话可删除下面这段 */
.internal-embed::before{
   content: attr(alt) " ";
   display:block;
   /* width: 5em !important; */
   white-space: nowrap;
   overflow: hidden;
   text-overflow: clip;
}


/* 设置嵌入文本的描边 */
.markdown-embed:not([src*="."]){
   /* border-top: solid 1px #ff3c00; */
   border: rgb(66, 66, 66) solid 1px;
   border-radius: 0px;
}


/* 嵌入文件的右上方打开链接按钮 */
.markdown-embed-link{
   top: -25px !important;
   right: 0;
   text-align: right;
   width: 20px !important;
   height: 20px;
   border-radius: 5px;
   /*指定链接按钮背后的背景色（现在为透明色）*/
   background-color: #4097df00;
   /*指定链接的图标颜色*/
   color: #888 !important;
}
2 个赞