使用純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到情況下啦！