<br> preventing line breaks in Chrome

Check out this example page

In my coding project, I have a series of <span> elements set to display as inline-block. Following the last <span>, there is a <br> tag inserted to create a new line (sometimes multiple <br> tags are used).

Oddly enough, while the new line displays correctly in Firefox, it doesn't work as intended in Chrome (version 24). The reason behind this inconsistency is unknown to me.

I am sharing this information for the benefit of others who encounter a similar issue online. I found no helpful resources on google or stackoverflow pertaining to this particular problem.

htmlcss

Answer №1

Issue Resolved: http://jsbin.com/ezatoy/32/edit

To resolve this problem, simply include a ZERO WIDTH SPACE in the container element as shown below:

div:after{ content:'\0200B'; }

By applying this method, it ensures that there is content after the last <br> tag, causing a line break without needing to modify or add any elements in the DOM structure.

Answer №2

Once you input some content, everything should work fine. Chrome simply doesn't like to leave empty space.

If you encounter an empty line, try adding &nbsp;.

Edit: Making changes due to the extensive discussion on this subject.

Firefox has a bug that displays newlines incorrectly. According to W3C standards, the "<br>" element must only be used for line breaks that are actually part of the content. Without any content following the <br>, it will not create a newline.

Answer №3

Although it may not be the most optimal solution, inserting a white space after the <br /> tag seems to resolve the issue in Chrome.

<br />&nbsp;

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

What is the best method for converting a png file to base64 and incorporating it into an asp.net mvc project?

I'm trying to export an image list in HTML, and it seems that the best way to do this is by converting them to base64. However, I've been having trouble finding clear instructions on how to transform an image into base64 and insert it into HTML. ...

c#htmlasp.net

Is it possible to create tabs using Ajax without using jQuery?

Exploring the realm of tabs that dynamically load content into a div without redirecting to another page unveils numerous possibilities. Although the existing examples mostly rely on ajax with jQuery or similar libraries, I am inclined towards exploring a ...

javascripthtmlajax

Adjusting Text Width in fabric.js: A How-To Guide

In my experience, I have found that setting textAlign for a fabric.js Text object seems to be ineffective because the textfield's width is automatically adjusted to fit the text perfectly. I searched through the API but couldn't find any way to ...

javascriptjqueryhtmlfabricjstext-alignment

The ng-model remains empty even after the $parent has been defined

I've encountered an issue where assigning ng-model to a text area and an input does not update the models. It is mentioned that this could be due to using ng-if causing a different scope, and I should use $parent, but even that solution is not working ...

javascripthtmlangularjsionic-framework

Stop the scrolling feature on Mobile IE 11 during an event

With this unique feature, users are able to freely create on an html5 canvas. Even though .preventDefault() and .stopPropagation() successfully prevent scrolling on other browsers like mobile Safari and Chrome when moving a finger across the canvas, mobile ...

javascripthtmlinternet-explorertouchdom-events

What is the best way to analyze this header information?

In the multipart header that I have, it begins with ------------------123456\r\n The number 123456 is a GUID that I need to extract. I have been trying to understand how this header is constructed by looking at the specifications, but it seems ...

html

What is the best way to retrieve the elements stored within the 'this' object I am currently manipulating?

How can I access the elements nested within the 'this' that I am currently operating on? Below is the HTML code that I am currently working with: <div class="expander" id="edu">educational qualifications <ul class="list"&g ...

javascriptjqueryhtmlthis

Utilize Vue.JS to showcase JSON information from an external file

Currently, I have a View.JS app that displays a conversation thread from a JSON file. The existing code appears as follows: const app = new Vue({ el: "#app", data: { messages:[ { name: "Support", message: "Hey! Welcome to suppo ...

javascripthtmljsonvue.jsvuejs2

How to wait for the webpage to fully load before executing a script using a Chrome extension

After opening a new website tab, I am attempting to select a DOM element by its class name. The issue I have encountered is not knowing how to effectively wait until the entire page has finished loading. Despite trying various methods such as alarms, setTi ...

javascripthtmlgoogle-chromedomgoogle-chrome-extension

What's Causing the Ternary Operator to Malfunction?

Currently, I am involved in the development of a Chat Room Website and have encountered an issue. It seems that the Ternary Operator is not providing the expected output. Below is the segment of code responsible for this task: html = html.replace(/(@[a-z ...

javascripthtmlreplaceternary-operator

The jQuery scrollTo plugin fails to consider the "over" argument

Both of these commands will move the content to the same spot (the left edge of the designated element) $("#gallery").stop().scrollTo(thisP, 400, {offset:{top:0, left:-$(window).width()/2}}, {over:0.5}); $("#gallery").stop().scrollTo(thisP, 400, {offset: ...

javascriptjqueryhtmlscrollto

Styling with CSS - Mastering the Genesis Bootstrapped Column Grid

Having some issues with the alignment of the margins on my widgetized home-page for a WordPress Genesis theme - Outreach Pro. The two “About” widget areas on the top row are not lining up correctly with the third (Friends) & fourth (Donate) widget are ...

csswordpressclassgenesis

What do you do when you need to hide a table column that has a colspan

I have been searching for a solution to my unique table structure, but I haven't found any that match my situation. When attempting to hide column A or B, the following code works perfectly: $('table td:nth-child(1),table th:nth-child(1)') ...

jqueryhtmlcsscss-selectors

Tips for customizing scroll bar padding and margin using CSS classes or IDs

I am looking to customize three different types of scrollbars with unique padding and margins. Here is the global style for my scrollbars: /* Modifying the scroll bar across the whole application */ /* width */ ::-webkit-scrollbar { width: 5px; he ...

htmlcss

Issue with locating an item in a dropdown menu while using Selenium

I am currently attempting to locate an element within a dropdown list in my Selenium test. Despite identifying the xpath using Firebug, the Selenium code is unable to find it. My goal is to pinpoint option value number 2 in the following html snippet: < ...

htmlxpathseleniumfirebug

What is the best way to dynamically adjust the size of a grid of divs to perfectly fit within the boundaries of a container div without surpassing them?

Currently, I am working on a project for "The Odin Project" that involves creating a web page similar to an etch-a-sketch. I have made some progress, but I am facing a challenge with dynamically resizing a grid of divs. The issue lies with the container d ...

javascriptjqueryhtmlcss

Having trouble getting the alert text on the left side of a Bootstrap button with the alert class

Hey there, I managed to create two buttons aligned on opposite sides of my webpage - one on the left and one on the right. Each button, when clicked, displays an alert text on its corresponding side, similar to what you see in this picture https://i.sstati ...

htmlcsstwitter-bootstrapalert

Designs created using ASCII characters in HTML that are not under my control

Hey there! I've been attempting to incorporate some ASCII art onto a website that I don't have control over. When I input text into their editor, it is then enveloped in <p> tags which makes adding ASCII art quite challenging. Firstly, I ca ...

htmlascii-art

Ways to initiate JavaScript event upon clearing input form field

I'm working on creating a dynamic search feature. As the user types in the search box, JavaScript is triggered to hide the blog posts (#home) and display search results instead (the specific script for this is not shown below). However, when the user ...

javascripthtml

Tips for Customizing the StrongLoop LoopBack Explorer CSS

Our team is currently utilizing Strongloop's LoopBack framework for our REST APIs and we are looking to customize the CSS of the LoopBack Explorer. Unfortunately, it seems unclear which CSS files are being employed (LoopBack vs Swagger) and their exac ...

cssuser-interfaceloopbackjsstrongloop