问题描述
ElementPlus + md-editor-v3，由于样式叠加，在预览时，会导致行间距加大
解决步骤一：引入样式顺序
提示：如果是在当前页面中引入 md-editor-v3 样式，一般不会受影响，可略过
下面导入样式要写在 导入 ElementPlus 的样式下面
import { MdPreview } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
解决步骤二：修改样式
适用下面纯预览模式、编辑窗口的右侧预览窗口：
<MdPreview :model-value="message.content" previewTheme="vuepress" />
测试样式是否生效
下面样式是测试用，如果预览 文字都变红色 说明 生效
<style scoped>
/*测试用，如果预览字体都变红色说明生效*/
:deep(.md-editor-preview *) {
color: red !important;
}
</style>
缩小行间距
<style scoped>
/* white-space 设置为默认值，换行符不会加大间距*/
:deep(.md-editor-preview) {
white-space: normal !important;
}
/* 压缩标题段落默认边距 */
:deep(.md-editor-preview h3) {
margin-top: 0.5em;
margin-bottom: 0.3em;
}
:deep(.md-editor-preview p) {
margin-top: 0;
margin-bottom: 0.8em;
}
</style>