文字换行、bootstrap的模拟框文字换行

1、pre文字换行

"pre"标签主要是包裹源代码，默认有overflow:auto则会出现滚动条，代码不方便阅读。

// pre 默认样式
pre {
    overflow: auto;
}
 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;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}
user agent stylesheet
pre, xmp, plaintext, listing {
    display: block;
    font-family: monospace;
    white-space: pre; 
//normal	默认。空白会被浏览器忽略。
//pre	空白会被浏览器保留。其行为方式类似 HTML 中的 
 标签。
//nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 
 标签为止。
// !!!! pre-wrap	保留空白符序列，但是正常地进行换行。
//pre-line	合并空白符序列，但是保留换行符。
// inherit	规定应该从父元素继承 white-space 属性的值。
    margin: 1em 0px;
}
// 解决pre换行问题：
// 解决办法  修改pre样式、正常换行
pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}```