Conceal a component when the succeeding one appears on a separate line

I'm looking for a solution to display an address on a webpage in two different formats based on the length. The first format should be:

Street Number, PostalCode City

If the address is too long to fit on one line, it should be displayed as:

Street Number

PostalCode City

I've managed to handle the line break, but I'm struggling with removing the comma. Is there a way to achieve this using just CSS or minimal JS?

Here's my current code:

HTML:

<div class="floatLeft">
   Street<span>&nbsp;</span>12<span>,&nbsp;</span>
</div>
<div class="floatLeft">9000<span>&nbsp;</span>Gent</div>

CSS:

.floatLeft {
   float:left;
}

Check out my working example on JS Fiddle: https://jsfiddle.net/7w70fff1/1/

csscss-float

Answer №1

Consider trying out this approach. The comma is placed in an absolute position, so that when the second div wraps, it appears to the left of the container viewport where it remains hidden.

.container {
  overflow: hidden;
}
.container::after {
  clear: both;
}
.floatLeft {
  float: left;
  position: relative;
}
.floatLeft:first-child {
  margin-right: 1ch
}
.floatLeft:not(:first-child) span:first-child {
  display: inline-block;
  position: absolute;
  right: 100%;
  top: 0;
  content: ',\00A0';
}
<div class="container">
  <div class="floatLeft">AnAwfullyLongStreetName<span>&nbsp;</span>12
  </div>
  <div class="floatLeft"><span>,&nbsp;</span>9000<span>&nbsp;</span>Gent</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

There is an issue with the navigation keys not functioning correctly within the cellrenderer input boxes in ag grid

Struggling with an autocomplete input box within the cell renderer component in an ag grid cell. When attempting to use the left/right navigation keys, the input does not move inside the box and instead exits the cell abruptly. Similarly, navigating down ...

htmlcssangularag-grid

Is there a workaround utilizing calc() and vh specifically for Chrome browsers?

Is it possible to find a CSS-only solution for incorporating vh in calc() functions specifically for Chrome browsers? I am trying to implement calc(100vh - 25px) as the top margin in order to make a 25px bar stick to the bottom of the page, but I am facin ...

cssgoogle-chromeviewport-unitscss-calc

Aligning floating elements in the center

Presently, I am working with the following code... <!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="UTF-8" /> <link href="verna.css" type="text/css" rel="stylesheet" /> </head> ...

csshtmlcss-float

Fixed navbar at the bottom of the page that transitions to static when scrolling reaches a certain location

Is it feasible to achieve this using Bootstrap v3? After conducting extensive research, it appears that a custom solution may be necessary. In essence, I am working with a navbar positioned at the bottom of the content area. Upon page load, if the navbar& ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can I prevent list items in jQuery Mobile from being truncated with ellipses?

Here is the list I am working with: <ul id="linksList" data-role="listview" data-inset="true" data-filter="true"> <!-- Dynamic contents! --> </ul> This list pulls its data from a local XML file (RSS feed). I am looking f ...

javascriptjquerycssjquery-mobile

Utilize jQuery to automatically assign numbers to <h1-h6> headings

Looking to develop a JavaScript function that can automatically number headings (h1- h6) for multiple projects without relying on CSS. Currently achieving this with CSS: body { counter-reset: h1; } h1 { counter-reset: h2; } h2 { counter-reset: h3; } ... T ...

javascripthtmljquerycssfunction

Keeping the header fixed on a sticky div (tocbot)

While working on my website, I decided to implement a Table of Contents section using tocbot. However, I encountered an issue where the Title I added above the table doesn't stay fixed when scrolling. https://i.stack.imgur.com/vCm1K.gif Here's ...

javascripthtmlcsssticky

Tips for Changing the CSS of an External Component with Material-UI-React

Is there a way to override the default CSS of an external component that is not developed in Material-UI or my project? In styled-components, I can simply take the root classes and replace them with my own custom CSS. How can I achieve a similar result wit ...

cssreactjsstylesmaterial-uijss

If the desktop website is zoomed in beyond 150%, it will automatically switch to mobile responsive mode

Whenever the desktop website is zoomed above 150%, it automatically switches to mobile responsive mode. Is there a way to disable this feature? You can find the website in question here: Give it a try by zooming to 150 percent and see for yourself. Appr ...

htmlcsstwitter-bootstrapweb

Refreshing a div's content with a single click to update the page

I'm experimenting with elements above my head and striving to absorb new knowledge. In my admin page, I use jQuery to reveal a hidden div that displays another page within it. Here's how I achieve this: $(document).ready(function(){ $("a#fad ...

phpjavascriptjqueryhtmlcss

Having trouble with Safari on your iPhone? Seeing image outlines peeking through radius borders?

Has anyone encountered a similar issue before? I'm experiencing this problem specifically on Safari for iPhone. Problem: https://i.sstatic.net/ffqWz.jpg Solution: https://i.sstatic.net/z1bUB.png Below is the HTML code snippet: <div class="row"& ...

htmlcss

Enhancing jQuery UI popups with custom styles and layout

Currently, I am working on a web application that relies heavily on jQuery. To create popup windows, I have integrated jQuery UI dialog along with jQuery UI tabs and jScrollPane for customized scroll bars. The overall structure of the application is as fol ...

htmlcssjquery-ui

Timer Does Not Appear to be Counting Down

I recently added a countdown clock to my website, but I'm having an issue with it not updating in real-time unless the page is refreshed. I'm not very familiar with javascript, so I found some code online and made some modifications myself to sui ...

javascripthtmlcss

Navigate between pictures using hover in jQuery

I am working on creating a feature where images cycle through individually every 2 seconds, but switch to the right image when its associated link is hovered. So far, I have managed to make the images show up on hover, but I am struggling with getting them ...

javascriptjquerycss

Trigger click functions sequentially to display elements after specific actions are taken

Is there a way to make jQuery listen for clicks only at specific times? It seems that when I add event listeners, like $("#box").click(function(){, they are executing before the code above them finishes running. Let's say I have two boxes that should ...

javascriptjqueryhtmlcss

What are some effective ways to align an image to the left and text to the right within a table

I need to display a member with a higher rank, showing the user image along with their username. However, I am struggling to align the image and text properly due to varying username lengths causing them to appear in a zig-zag position. Here is what I hav ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-3

Is there a way to display a bootstrap modal when the page is refreshed?

Is there a way to automatically display a Bootstrap modal box without the need for clicking anywhere? I want the modal to appear every time the page is refreshed, rather than requiring a click event. Can anyone provide guidance on achieving this? < ...

javascripthtmljquerycsstwitter-bootstrap

Strive to discover the ideal solution for capturing a screenshot of an OpenLayers map using html2canvas. Currently, the map elements are losing their CSS classes and images are not

Seeking advice on the best solution for working with html2canvas and css. I'm trying to take a screenshot of a map that includes various elements, but after capturing the image, all the css classes are lost and the images are not rendered properly. S ...

javascriptjquerycsshtml2canvascanvg

Altering an element's visibility from 'none' will trigger its animation to play once again

Take a look at the snippet below and you'll see that the sliding animation plays twice - once when the .addClass statement runs, and again when #test's display is switched to 'initial' (timeouts are in place to help visualize the issue) ...

jqueryhtmlcssanimation

Space between flex content and border increases on hover and focus effects

My code can be found at this link: https://jsfiddle.net/walshgiarrusso/dmp4c5f3/5/ Code Snippet in HTML <body onload="resize(); resizeEnd();"> <div style="margin: 0% 13.85%; width 72.3%; border-bottom:1px solid gray;"><spanstyle="visibilit ...

javascripthtmlcss