響應式代碼塊

我在手機上看到了很多帶有代碼塊的網站，但只有少數網站有響應。如果代碼行太長，我看不到代碼的其餘部分。我現在也在開發一個代碼中的網站。如何讓代碼塊響應？這是我的代碼。響應式代碼塊

pre { 
    width: 70%; 
    font-family: 'Courier New', Courier, monospace; 
    background-color: #b3b3b3; 
    color: #ededed; 
}

來源

2013-11-24 LightningBoltϟ

-1

如果你不能得到的數字與word-wrap:break-word的工作線路，只需使用亞歷克斯Gorbatchev的語法高亮和其他人一樣;）無需推倒重來。

來源

2013-11-24 13:02:07

在我看來，重新使用其他零件並不總是一個好主意。此答案不...直接回答問題。 –

我推薦的腳本靈活且可擴展（您可以選擇需要的語法和樣式）。我的回答不是複製品，這是真的。但它確實幫助那些不知道有更好的解決方案的人。 –

一種解決方案是給預塊溢出屬性來隱藏多餘的或導致其滾動。另一種解決方案是讓它包裝。

pre { 
    white-space: pre-wrap; //css3 
    white-space: moz-pre-wrap; //firefox 
    white-space: -pre-wrap; //opera 4-6 
    white-space: -o-pre-wrap; //opera 7 
    word-wrap: break-word; //internet explorer 
}

來源

2013-11-24 12:54:35

pre { 
    padding: 0.1em 0.5em 0.3em 0.7em; 
    border-left: 11px solid #ccc; 
    margin: 1.7em 0 1.7em 0.3em; 
    overflow: auto; 
    width: 93%; 
    font-family: "Courier New", Courier, monospace, sans-serif; 

}

來源

2014-08-05 03:28:53

響應式代碼塊

回答

相關問題