鍍金池/ 問答/HTML5  HTML/ flex布局下div內(nèi)文字過多時不會自動換行

flex布局下div內(nèi)文字過多時不會自動換行

圖片描述

.item-header {
  height: 50px;
  /*padding-right: 20px;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  /*flex-wrap: wrap;*/
}

我打算flex布局，頭像div單獨占據(jù)左邊一個列（width:70px），然后右邊為留言內(nèi)容，占據(jù)剩下百分之百的尺寸（width:calc(100%-70px)），上面那段代碼為此div的父div樣式。

現(xiàn)在的問題就是這個div下的其他div或者p標簽內(nèi)文字過多不會自動換行，設置white-space: normal;都無效，請問一下怎么解決

回答
編輯回答
青檸

因為你打的是英文，中間沒有空格默認算一個單詞，你得給他加上word-break: break-all;強制換行，不管什么都給你拆開來

2018年8月9日 08:09
編輯回答
晚風眠

在包裹文字的元素上加上：
overflow-wrap: break-word;
word-wrap: break-word; / 兼容IE/
試試，注意頂層父元素加上：
overflow:hidden;
你參考下。

2017年10月18日 16:12