CSS word-wrap property not functioning within a div element

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!

Answer №1

Make sure to include the "messages" class in your div, and update ".messages div" to simply ".messages".

If that doesn't solve the issue, consider changing

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

Answer №2

The solution to your question is working exactly as intended. To further assist you, please provide additional information or a live example of the issue:

Check out this live example on JSFiddle

.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>Hellloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Expandable Checkout Form for Woocommerce

I need help troubleshooting a WooCommerce collapsible checkout form using Bootstrap Collapse. Below is the HTML markup I am currently using: <div class="panel-group" id="checkout-accordion"> <div class="panel panel-default" id="panel-billing"&g ...

Change the appearance of the page when it is being displayed within an iframe using CSS

How can I display a webpage differently using CSS if it is within an iframe? I would like to use jQuery or JavaScript to switch to a different stylesheet specifically when the site is being displayed within an iframe. Any suggestions on how to achieve th ...

Enhance the speed of webview on Android devices

I have been working on an application that utilizes a webview to load both HTML and JavaScript files. Unfortunately, I have noticed a significant decrease in performance when displaying the content. Despite trying various solutions such as: webVi ...

Stacked PNG's in an HTML design

Has anyone been successful in stacking 3 layers of png images on a table? I am attempting to achieve this with a table that has 6 columns. Grey Arrow - Serving as the table background image Red Arrow - Representing a PNG within the table Blue Arrow - Ind ...

Extracting information from Mysql database and saving it in the option html element

Hi everyone, I'm facing a problem with a question. My goal is to fetch data from MYSQL and save it in an option tag. Below is my code snippet. <?php $user = "admin"; $password = ""; $db = "test"; $host = "localhost"; $cxn = mysqli_connect($host, $ ...

jquery is unable to fetch the input value from a dynamically generated field inside a function

Something peculiar keeps happening to me when I utilize jQuery, which is different from what others have encountered in the forums. Whenever I make an ajax call and generate an input element (on success), like so: Start Date: <input type="text" id="gr ...

"Using jQuery to append a new div after the last div that matches a specified class on

I am looking to dynamically add a new div element at the end of the last match on click. <form id="form"> <div class="border item-block"> <p><b>Color :</b> silver </p> <input type= ...

Issue with submitting Laravel form using post method

I've encountered an issue with a form that is supposed to post a title and a body, but when I submit it, nothing happens. I have included a csrf field and I am using the post method. Despite trying various methods to declare the action and the method ...

What are the best ways to ensure text stays center aligned and prevent position absolute elements from overlapping?

I'm currently working on a project that involves center-aligning the page title within the parent div. However, I have run into an issue with an overlapping back button when the page title is too long due to its absolute positioning. Can anyone provid ...

Adding Text Above a Material Icon in Angular: A Guide

Here is some sample HTML code to consider: <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <mat-icon class="fa fa-folder" style="font-size:48px;"><span style="color: re ...

Tips for effectively documenting CSS on a extensive website

Our website is quite extensive, with numerous pages. As we've added more pages, the amount of HTML and CSS has also increased. We're wondering if there's an efficient way to document all of this information. For example, how can we easily de ...

Unable to save the current light/dark mode preference to local storage

Being a beginner in JavaScript, I am currently working on implementing a simple light mode button for my website which defaults to dark mode. The transition between JS/CSS dark and light modes is seamless, giving the site an appealing look when switching t ...

CSS/HTML - Issue with nested divs not displaying properly

Attached is an image that provides context for the issue I'm facing. https://i.stack.imgur.com/nQXh8.jpg I'm encountering difficulties with styling a nested div element. When double-clicking the text within this div, only half of it gets highlig ...

Error encountered while running `ionic build android`. To view the stack trace, try running the command with the `--stacktrace` option

I've gone ahead and installed the sdk, as well as added JAVA_HOME, so why am I encountering this error when executing ionic build android? It seems that you haven't accepted the license agreements for certain SDK components: [Android SDK Platf ...

Tips for dynamically appending a string to a predefined variable in React

When I was working on creating a text input space using the input type area and utilizing the onChange utility, everything was running smoothly. Now, my task is to incorporate an emoji bar and insert a specific emoji into the input space upon clicking it. ...

What steps can be taken to identify the referrer of external links when the target attribute is set to "_blank"?

Can't seem to capture the Referrer with PHP: $_SERVER['HTTP_REFERER']; Whenever visitors land on mywebsite.com from external-web-site.com via a link with target="_blank", for example: ... <a href="http://mywebsite.com" target ...

The Droppable feature in jQuery/jQueryUI molds itself to match the shape of the Dragged

In my current setup, I am working with a single column table where each cell is a droppable element that only accepts draggables of a specific class. While the borders of the table are visible, I am not a fan of the fixed size and colored cells within, a ...

Current recommended method for updating innerHTML with properly formatted text?

My understanding is that using innerHTML on an element can be risky, as malicious users could potentially inject harmful content such as <script> tags. This question shows there are multiple alternative tags, some of which are non-standard. In my s ...

Discrepancy in Code Outputs

Last night, I spent some time testing out code for basic functions. To preview my work, I used two platforms - Dash and JSFiddle. Everything seemed to be running smoothly on both sites. However, when I uploaded the code to my live website, none of the butt ...

Making a readonly input appear like a div using css

Is there a way to style a readonly input to look like a block level element while maintaining its automatic width adjustment? Setting the width to 100% is not the desired solution. Here is the CSS code that I have tried: input:read-only, textarea:read-on ...