使用纯css实现类似于CSR方块排列

有需求就有方案。现在遇到一个问题是后台返回已经格式化好的CSR，但是在前端页面显示是不像在代码编辑器中一样会自定排版。之前看了有js方案的，传送门，这样解决是没问题，但是用来处理CSR的会出现一个问题就是会重新组合字符串的长度，但是这不是我们需要的，回溯到最初，布局本来就是CSS的事，我们先来看一张没有添加样式的CSR

只能用一个“丑”来赞美了。

接下来我就要传递秘籍了，直接上代码。

.csr-pre pre {
      display: block;
      padding: 9.5px;
      margin: 0 0 10px;
      font-size: 13px;
      line-height: 1.42857143;
      color: #333;
      word-break: break-all;
      word-wrap: break-word;
      font-family: Menlo,Monaco,Consolas,"Courier New",monospace;;
    }

其中又一个很容易被忽略的问题就是字体，考虑到CSR是英文符号和英文字母组合而成，使用这些字体是一个非常好的到选择，而且不用担心兼容性。

看下美颜后端CSR

还是很舒服滴，但是会有一个问题就是响应式，目前还没有做，但是我想在应用CSR场景到情况下也不会存在低于768px到情况下啦！