CSS break-word不在Div中工作

Question

我正在使用离子框架从db中迭代单词。单词横跨div并且从不在遇到div的结尾时刹车，而是单词截断。我在我的CSS中使用了破解词，但没有取得好成绩。

返回父div的app.js文件：

$scope.isNotCurrentUserInner = function(user){

            if(current_user != user){
                return 'other_messages';
            }
            return 'messages';
        };

这是我的css

.messages {
  background: #c2dfff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

}
.messages div {
  font-size: 14.5px;
  font-family: "Helvetica Neue";
  margin: 0 0 0.2rem 0;
  color: #000;
  word-wrap: break-word;
}

这是显示字

<li class="{{ isNotCurrentUserInner(msg.Name) }}">
    <div>{{ msg.Content }}</div>
</li>

这是屏幕副本： 请帮忙！

Answer 1

你的div没有类“messages”添加该类并将“.messages div”更改为“.messages”。

如果这没有帮助，尝试更改

“自动换行：break-word;” 至 “断言：打破所有;”

Answer 2

重现您在问题中描述的内容正好正如您所期望的那样。您需要提供更多信息或问题的实例：

https://jsfiddle.net/jabark/pg0czu9L/

＆＃13;

＆＃13;

.messages {
  background: #c2dfff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.messages div {
  font-size: 14.5px;
  font-family: "Helvetica Neue";
  margin: 0 0 0.2rem 0;
  color: #000;
  word-wrap: break-word;
}

＆＃13;

<div class="messages">
  <div>Helllooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</div>
</div>

＆＃13;

＆＃13;

＆＃13;