I have been developing a chat application and one of the challenges I faced was dynamically populating messages in a div element
$('#conversation').append('<div class="message"><span><b>'+username+': </b>' + data + '</span></div>');
However, when a message is too long, it does not wrap to the next line as expected. I attempted to use
white-space:normal;
but unfortunately, it did not work. You can find a dummy example on this Fiddle
.text {
overflow-wrap: break-word;
white-space: normal;
}
The desired CSS style to include would be:
word-wrap: break-word;
After reviewing your code, I recommend making the following adjustment:
span{display:inline-block;}
To ensure proper word wrapping, simply utilize word-break: break-word;
.message {
white-space:normal;
word-break: break-word;
}
For more information on the usage of this property, please visit: http://css-tricks.com/almanac/properties/w/word-break/
Additionally, prevent long URLs from overflowing their container by using: http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
Helpful Tips:
In some cases, it is recommended to combine the word-break property with hyphens for inserting hyphens at line breaks:
-ms-word-break: break-all; word-break: break-all; // Not standard in webkit word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;
I've been struggling to get a dropdown's selected value to change based on a query result. No matter what I do, it always defaults to the first option. After searching through numerous similar questions, none of the solutions seem to work for me ...
Let's say I have a navigation button labeled "German", when clicked it smoothly scrolls down to an h2 heading that says "Traditional German Foods". Similarly, if there was a button called "French" in the navbar, the user would be directed further down ...
I have a situation where certain fields require a three-letter shortcode for locations. These shortcodes are not widely known and are mainly familiar to a select group of long-time users. For example: LND - London SWN - Swindon The dropdown menu displa ...
Here is the HTML code I have: <li onclick="switchColors()"> <a class="x" href="Faculty.php">Faculty</a> </li> <li onclick="switchColors()"> <a class="x" href="Contact.php">Contact</a> </li> And here ...
I was trying to set up a key shortcut (shift + c) that would focus on the select tag in my form when pressed, similar to how tab works. Here is the HTML code for my form's select tag: <select id="myOptions"> <option selected> Opti ...
I have a variable number of <h3> tags with the same class .love_nummer <h3 class="love_nummer">1</h3> Each of these tags contains a number, and alongside each .love_nummer tag is another tag with the class .give_love <h3 class="give ...
Is there a way to swap out the checkbox for an image? I want this image to change dynamically based on whether the checkbox is checked or not. Unfortunately, adding a class doesn't seem to do the trick as it modifies all icons in the same column. The ...
Despite setting my text to font-family: Times New Roman, I'm seeing a different font in my Chrome browser. Here is the relevant HTML code: <p style="color:#F17141;font-size: 120px; font-family: "Times New Roman" ; font-weight: b ...
$('#clickMe').click(function() { $('#ticketsDemosss').append($('<li>').text('my li goes here')).addClass('fadeIn'); }); <link href="http://s.mlcdn.co/animate.css" rel="stylesheet"/> <script ...
Imagine having a square parent container with 100 child elements of equal sizes, as illustrated below. How can you use the :nth-child selector to target and style the children in the top-left, bottom-left, top-right, and bottom-right corners separately? ...
I've attempted troubleshooting my router countless times, but it still won't work properly. I'm unable to navigate or switch to different pages in my Vue project. Despite following all the steps outlined in this link , nothing seems to chang ...
I'm trying to get the background images to display side by side with equal sizes and no spacing between them. The current code achieves this, but the images end up overlapping slightly, not filling 100% of the container. Despite setting the backgroun ...
Currently, I am developing an online store. In my code, there is a requirement to display attributes and descriptions for multiple products on a single page. The attributes are displayed in a table format, while the description can include simple text as w ...
For my project, I am attempting to send an HTTP Post request to my Node server from an html form. Despite using Body Parser and setting it up correctly, I am facing an issue where the req.body on my server is returning as an empty object. Can anyone prov ...
Currently experimenting with this demo and I'm looking to adjust the color of icons when hovered over .demo-navigation .mdl-navigation__link .material-icons:hover { background-color: #00BCD4; color: #FFF; } Unfortunately, my attempt was unsucces ...
This is a block of code. let image = new THREE.TextureLoader().load("http://odf9m3avc.bkt.clouddn.com/1493817789932.jpg") <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script> <img class='preLoad&apo ...
When I click on the hello (plane geometry) as shown in the figure, a popup appears on the extreme left of the screen instead of appearing on the plane geometry box. Can someone please help me fix this issue? I have also included the code below: https://i. ...
Consider a scenario where the database has a field named NAME which contains text with both single and double quotes: TEST1 "TEST2" 'TEST3' Now, if you want to edit this value using the following code in a form: <label for="name">Ful ...
I need help hiding the "founds 2 result" and "page 1 to 1" text on my display, but I'm not sure how to do it. Any suggestions would be greatly appreciated! https://i.sstatic.net/L77nj.png ...
I need to search for rows based on three attributes in each row. Currently, I am able to search by one attribute using the following code: var rows = $("#tbl1 > tbody > tr[cName=1]"); However, I encounter an error when trying to search by all thre ...