前言

當文字內容是很長的連續數字或者很長的英文字元時，會超出容器的邊框，導致字元重疊。

問題描述

html內容

 <div class="container">
        <div class="row">
        <div class="col-xs-6 col-md-6" style="background: rgba(158,174,76,0.14)">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Resize your viewport or check it out on your phone for an example.</div>
        <div class="col-xs-6 col-md-6" style="background: rgba(114,76,174,0.21)">22222222222222222222222222222222222223333333333333333</div>
        </div>

    </div>
 

出現的問題，連續的數字和英文不會自動換行

解決辦法

這種情況對連續的字母和數字是不好用的，因為解析的時候會把它看成是一個單詞。要解決問題必須強制折行

 <div style="word-break:break-all;word-wrap:break-word;">

或者在head頭部設定全域性樣式

    <style>
        div {
            word-break: break-all;
            word-wrap: break-word;
        }
    </style>

新增後實現效果