CSS断字在Div中不起作用

Question

I am iterating words from the db using ionic framework. The words spans across the div and never brakes on encountering the end of the div and instead the words truncates. I have applied break-word to my css but no good result achieved.

app.js file that returns the parent div:

$scope.isNotCurrentUserInner = function(user){

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

This is my 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;
}

This is the display words

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

This is the screen copy: kindly assist!

Answer 1

Your div does not have the class "messages" add that class and change ".messages div" to just ".messages".

\n

If that doesn't help, try changing

"word-wrap: break-word;" to "word-break: break-all;"

Answer 2

Reproducing what you've described in your question works exactly as you're expecting. You need to provide more information or a live example of your issue:

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

 .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; } 

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