bootstrap css pre 斷行 – 原意筆記本

在開發案子時，不知為何原因程式設計師把原先預定的 <P>區塊改成了 <pre>，試了一下原本以為是改 CSS 內的文字斷行就可以了，不過 pre 在 CS S針對瀏覽器有不同的設定。

bootsrap 預設 css pre {overflow: auto;} 的區塊如果超出就會將區塊轉成捲軸型式，而且文字不會跟著區塊斷行，需用下列方式處理。

pre {
  overflow: inherit; /* bootsrap 改成x和y都顯示，文字會配合區塊自動斷行。 */
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
}

pre {

overflow: inherit; /* bootsrap 改成x和y都顯示，文字會配合區塊自動斷行。 */

white-space: pre-wrap; /* css-3 */

white-space: -moz-pre-wrap; /* Mozilla, since 1999 */

white-space: -pre-wrap; /* Opera 4-6 */

white-space: -o-pre-wrap; /* Opera 7 */

word-wrap: break-word; /* Internet Explorer 5.5+ */

}

資料源：
讓pre標籤內的程式碼自動換行的方式

標籤雲