[HTML/CSS] PER標籤中要折字換行(PRE中防止容器破壞)

在pre中因為設置 

  white-space: pre;

的屬性，因此不會自動的換行，如果一行的內容很長，就會把容器撐開，破壞容器外觀。

相關連結Tyler Longren有提供解決法：

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap !important; /* 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+ */
}

參考資料

[1] https://stackoverflow.com/questions/248011/how-do-i-wrap-text-in-a-pre-tag

[2]   [HTML] CSS中的折字換行或不換行(防止容器破壞)@新精讚

相關連結

https://www.longren.io/wrapping-text-inside-pre-tags/