flex布局下div内文字过多时不会自动换行

Question

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

我打算flex布局，头像div单独占据左边一个列（width:70px），然后右边为留言内容，占据剩下百分之百的尺寸（width:calc(100%-70px)），上面那段代码为此div的父div样式。

现在的问题就是这个div下的其他div或者p标签内文字过多不会自动换行，设置white-space: normal;都无效，请问一下怎么解决

Answer 1

因为你打的是英文，中间没有空格默认算一个单词，你得给他加上word-break: break-all;强制换行，不管什么都给你拆开来

Answer 2

在包裹文字的元素上加上：
overflow-wrap: break-word;
word-wrap: break-word; / 兼容IE/
试试，注意顶层父元素加上：
overflow:hidden;
你参考下。