項目背景

這個頁面字段時一個地址信息，正常的地址信息，比如英文狀態(tài)下，單詞之間會有空格，而該地址信息由于后臺解析服務(wù)異常，各區(qū)域之間的空格沒有，所以出現(xiàn)了一個超長的單詞比如這種形式abcdfghdkhkhkhkhdhashjfhdlfshdkfhksahdfkjafskfdhaksdhfkahdfksadfhakjdfhksdjfhfskjdfhksjfhkhdfkshadkfhaksdhfkshdfksajdfhsadfkhasdhfashfdkashdfkjashkdfhsjdfsdfhkasdhfj，這樣英文單詞出現(xiàn)了一個越界現(xiàn)象。中文布局下樣式可以正常換行。

這個布局樣式 左側(cè) 圖標，右側(cè)文字

兼容性

break-word 兼容性來看，適配safari、edge、 chrome都是OK的。再使用break-word時，期初發(fā)現(xiàn)它對于長單詞并未生效。
推薦寫法如下

對于響應(yīng)式寫法同樣適用
父類item樣式， 注意 overflow:hidden , flex-wrap: wrap 和 word-wrap:break-word;

地址信息的樣式使用了item-text樣式，這里注意聲明了它的寬度 width:160px, 這個的意思時，每個長單詞的寬度，最多時160px，超過160，它就會換行了。

 .item {
          display: flex;
          overflow: hidden;
          flex-wrap: wrap;
          color: $text-color;
          margin-top: $margin-top;
          word-wrap: break-word;
        &-text {
          flex:1;
          width:160px;
        }
       }