背景

前端开发经常遇见很多富文本，接口返回富文本代码片，代码片里面夹杂着各种行内样式，按照常理我们只需要渲染即可。可是奈何这个代码片参差不齐，如果不加限制，可能导致富文本内容无法正常预览。今天我们简单聊聊富文本的样式书写，应该做怎样的限制。

1. 基础样式

基础样式是指我们引入的base.css文件中，对于字体、背景颜色、li、ul等的基本限制影响我们的富文本样式，所以需要对富文本中所有元素，再来一次重置（即normal-默认）处理。

  • 常见问题：
  1. 特殊DOM的样式需要重置为默认值；因为如果富文本中默认使用了i标签做倾斜展示，而我们的基本样式限制倾斜后，页面展示就和原本要的效果有出入。

    例如ul、li的list-style-type属性；strong标签的font-weight属性；i标签的倾斜属性等；

  • 解决方式：

检查项目的base.css中有那些继承属性被重置，然后在富文本中做相应调整

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 重置reset的样式 */
.parent-container ul,
.parent-container ul li {
    list-style-type: disc;
}
 
.parent-container ol,
.parent-container ol li {
    list-style-type: decimal;
}
.parent-container li{            
  list-style:inherit;
}
.parent-container em{
  font-style: italic;
}


2. 图片/视频

图片是富文本里面最常见的，但是图片又是富文本常出问题的地方。例如：

  • 常见问题：
  1. 图片过大，导致超出屏幕；
  2. 图片是很多个无缝衔接的切割图组成的大图，但是这个无缝链接被切割开一个间隙；
  3. 图片src属性写死http,导致在IOS部分手机里面无法正常展示
  4. 图片有brder
  5. 图片加载失败需要固定托底图样式
  6. 图片需要另起一行或者嵌入
  • 解决方式：
  1. 设置图片最宽100%；防止图片拉伸，做高度 auto;
  2. 手动为图片元素添加display为inline的父级div,并设置该父级样式line-height为0；
  3. 使用正则替换图片src属性中http:// 为 https: 前提是https需要能访问到；如果不确定就不要此操作
  4. 图片限制border为0，或者none；
  5. 正则替换图片err托底；
  6. 根据要求看是否限制图片的display属性；图片默认为inline
1
2
3
4
5
6
7
8
9
10
11
12
13

.parent-container img {
  max-width: 100%;
  height: auto;
  border: none;
  vertical-align:top;
}

.parent-container video {
  max-width: 100%;
}

3. 文字

  • 常见问题：
  1. 文字字体过大，但是行高太小，导致文字展示不全；
  2. 字体太大或者太小；
  3. 文字超出屏幕，遇英文单词或者连续空格没有换行。导致文字溢出；
  4. 文字有缩进
  5. 文字居中问题
  • 解决方式：
  1. 设置行高为1.5，不要设置具体像素；
  2. 设置富文本最外层父级字体；利用继承限制最小字体；
  3. 设置文字切段break样式
  4. 设置默认缩进
  5. 设置默认文字靠左
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.parent-container {
    font-size: 16px;
    line-height: 1.5;
    color: #000;
    word-wrap: break-word;
    word-break: break-all;
    overflow-wrap: break-word;
    text-align: left;
    text-indent: 0;
}
.parent-container span, .parent-container p {
    line-height: 1.5;
}

4. 表格-table

  • 常见问题：
  1. 表格没有最宽展示；
  2. 表格缺少border;或者边框颜色不对；
  3. 表格单元格中间有空隙；
  • 解决方式：
  1. 设置表格宽度100%；
  2. 设置表格基本css属性，包括单元格间隙和border
  3. 设置cellpadding属性；
  4. 相应查看表格中th和td的行高、居中、折行等样式
1
2
3
4
5
6
7
8
9

.parent-container table {
    max-width: 100%;
    width: 100%;
    border: 1px solid #000;
    border-collapse: collapse;
}

5. 超链接

a标签默认有自己的下划线和颜色，这里我们可以根据页面风格统一设定颜色和下划线

1
2
3
4
5
6
7
8
9
10

.parent-container a {
    /* 颜色可按照各页面风格自定义 */
    color: #06c;
    /* PC端需要定义cursor */
    cursor: pointer;
    text-decoration:  underline;
}

总结

以上为自己遇见部分的富文本样式问题，总结文档，可能并不适合所有项目富文本；具体默认样式可能需要参考自己项目的富文本编辑器的一些默认，力求页面展示和后台富文本编辑展示效果一致。