I am currently using the ionic framework to iterate words from a database. However, I am facing an issue where the words span across the div and do not break when reaching the end of the div; instead, they are truncated. I have tried applying the break-word property in my CSS but have not been able to achieve the desired result.
Here is the snippet from my app.js file that returns the parent div:
$scope.isNotCurrentUserInner = function(user){
if(current_user != user){
return 'other_messages';
}
return 'messages';
};
Below is the CSS I have used:
.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 how the words are displayed:
<li class="{{ isNotCurrentUserInner(msg.Name) }}">
<div>{{ msg.Content }}</div>
</li>
Attached is a screenshot for reference: https://i.sstatic.net/cM6qP.png Your assistance would be greatly appreciated!