背景
h5项目中经常会出现“使用协议/隐私政策”。这些内容一般都是服务端给返回的富文本。
问题
一般协议中难免会出现表格等形式展示更多的信息。但是对于产品人员或者法务人员给我们的富文本展示出来的表格。已经远远的超出了页面内容的宽度。
处理方式
如果前端人员为了完全的展示表格,要么允许横向滚动,要不自己处理富文本中table标签。
方案一:页面允许横向滚动,虽然表格可以展示完全,但是页面会显得特别“宽松”,因为除表格外的内容是和页面一样宽的。
方案二:我们可以针对table标签进行处理,处理成table宽度和页面一样宽,表格内容折行处理。
table {
table-layout: fixed; // 表格宽度设置为当前父级宽度
td {
// 内容折行 可以使链接折行
word-wrap: break-word;
white-space: normal;
word-break: break-all;
text-align: left;
}
}
备注
会有人说,可以给table标签包裹一个div。给div设置横向滚动,也可以使表格滚动起来。
<div style="width: 100%; overflow: auto;">
<table>
表格内容
</table>
</div>
当时内容是产品/法务人员编写的。所以还是咱们自己处理了。