Use dots to bridge the gap between two text elements

Trying to find a way to automatically adjust spacing between two objects has been a challenge for me. Specifically, I am dealing with menu items and their corresponding prices.

The desired outcome would look something like this:

Burger..........................$9.99
Steak and Potato.........$14.99
Mac and Cheese.........$6.99

The key requirement is that the spacing between each menu item and its price remains consistent. Users should be able to input both the menu item and price, and the space in-between should adjust accordingly.

I have attempted the following solution, but it doesn't seem to work as intended:

.inLine {
  display: inline-block;
}
 <h1 class='inLine menuItem'> Burger </h1> 
<span class='inLine dots'> .....................</span>
<h3 class='inLine price'>  $9.99 </h3> 
<br>
<h1 class='inLine menuItem'> Steak </h1> 
<span class='inLine dots'> .....................</span>
<h3 class='inLine price'>  $14.99 </h3>

<h1 class='inLine menuItem'> Mediterranean Chopped Salad </h1> 
<span class='inLine dots'> .....................</span>
<h3 class='inLine price'>  $14.99 </h3>

The main issue lies in ensuring that the dots occupy the appropriate amount of space regardless of the length of the item name. I've experimented with setting the dots to width: 100%, but that hasn't solved the problem. Any suggestions?

javascriptjqueryhtmlcssspace

Answer №1

section {
  display: flex;                     /* Establishing Flex Container */
  align-items: baseline;             /* Aligning elements vertically to baseline */
  margin-bottom: 10px;
}
section > * {
  padding: 0;
  margin: 0;
}
span {
  flex: 1;                          /* Dots consuming all available space */
  overflow: hidden;                 /* Clipping extra dots off-screen */
}
<section>
  <h1> Burger </h1>
  <span>..............................................................................................................................................................</span>
  <h3>  $9.99 </h3>
</section>
<section>
  <h1> Steak </h1>
  <span> ..............................................................................................................................................................</span>
  <h3>  $14.99 </h3>
</section>
<section>
  <h1> Mediterranean Chopped Salad </h1>
  <span> ..............................................................................................................................................................</span>
  <h3>  $14.99 </h3>
</section>

Additional information:

  1. You can adjust the distance between menu items and prices by modifying the container width.
  2. In this example, using many dots may appear unappealing, but it serves as a basic demonstration. Consider alternative styling options such as pseudo-elements or scripting loops.
  3. Alternatively, you can experiment with dashed or dotted borders for a different effect.

section {
  display: flex;
  align-items: baseline;
  margin-bottom: 10px;
}
section > * {
  padding: 0;
  margin: 0;
}
span {
  flex: 1;
  border-bottom: 2px dotted #333;
<section>
  <h1> Burger </h1>
  <span></span>
  <h3>  $9.99 </h3>
</section>
<section>
  <h1> Steak </h1>
  <span></span>
  <h3>  $14.99 </h3>
</section>
<section>
  <h1> Mediterranean Chopped Salad </h1>
  <span></span>
  <h3>  $14.99 </h3>
</section>

Answer №2


h1.menuItem {
  position: relative;
  display: inline-block;
  width: 350px;
  font-size: 14px;
  text-align: justify;
  text-align-last: justify;
  border-bottom: #000000 dotted 2px;
  background: #ffffff;
}
span.good-name {
  display: inline-block;
  height: inherit;
  line-height: inherit;
  position: absolute;
  left: 0;
  bottom: -5px;
  background: inherit;
  padding-right: 5px;
  text-align: left;
  text-align-last: left;
  -moz-text-align-last: left;
}
span.price {
  display: inline-block;
  height: inherit;
  line-height: inherit;
  background: inherit;
  position: absolute;
  right: 0;
  bottom: -5px;
  padding-left: 3px;
  text-align: left;
  text-align-last: left;
  -moz-text-align-last: left;
  width: 50px;
}
 <h1 class='inLine menuItem'>
            <span class='good-name'>Burger</span>
            <span class='price'>$9.99</span>
        </h1>

Answer №3

A possible solution could be using flexbox. Fill the center area with an excessive number of dots, disable word-break, and apply the CSS property overflow-x: hidden.

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

The transition effect is not functioning properly in CSS and React.js

.cartBtn { appearance: none; outline: none; border: none; cursor: pointer; text-align: center; background-color: transparent; color: inherit; } .cartBtn:hover { color: black; } .cart { display: none; opacity: 0; transition: all 4s ea ...

cssreactjshovercss-transitionsdisplay

Steps for incorporating "about minutes ago, about hours ago, etc;" into a .filter for an Angular/Ionic v1 project

Can someone help me figure out how to incorporate phrases like "from now," "ago," etc. into a JS filter in my ionic v1 project for WordPress without using UTC Date? I am currently working on an Ionic v1 app that is native to WordPress, so it's crucia ...

javascriptangularjsdate-formattingionic-v1

What is the best way to send client-side events in NextJS?

Trying to send an event to Google Analytics from a client-side application built in Next.js has proven challenging. The code snippet below illustrates the attempt, but accessing const handleUserClick within useEffect is proving difficult: useEffect(() =& ...

javascriptreactjsnext.js

How to Retrieve Values from Dynamic Arrays in JavaScript Without Specifying Keys

var data = [ { 'Specials 5': 2192, 'dates': '2021-06-14' }, { 'Specials 8': 767, 'dates': '2021-06-16' }, { 'Specials 13': 2264,'dates': '2021-06-18' }, ] ...

javascriptarraysjsonobjectkey

Why is the combination of position: absolute; and bottom: 0; not aligning with the bottom of the body element as expected

update: After some research, I discovered that adding a position: relative; to the body element will cause the element to be positioned at the bottom of the body. However, I did not find any information on what happens when a non-static parent is not found ...

htmlcss

Choosing a value in VueORSelecting

Having some issues with vue select. I have a function that should return the id as the value and display the text as an option, but it is currently returning the full object of the selected value. For instance: I am fetching selectable options from my bac ...

javascriptvue.js

.htacces Disables Styling on Page

I've been trying to understand the functionality of .htaccess RewriteRule. Here is a URL example where I have experimented with .htaccess: http://example.com/test/home This used to be: http://example.com/test/index.php?p=1 My goal is to redirect ...

css.htaccess

Adding fresh elements to the state array in React Native

I am experiencing an issue with the code provided below: import React, { Component } from "react"; import { SafeAreaView } from 'react-navigation' import {Keyboard, Text, View, TextInput, TouchableWithoutFeedback, Alert, KeyboardAvoidingView, St ...

javascriptreact-native

Mishandling of string interpretation

I'm having trouble converting ANSI color codes from console output into HTML. While I discovered a script that can handle this task, I am struggling to make it parse the strings within node js properly. Even when I attempted to JSON.stringify it to in ...

javascriptnode.js

The CSS descendant selector does not seem to be functioning properly with the focus state on iOS

In order to display content using the :focus state when the parent element has focus, I have used the following CSS code: .child { display: none; } .parent:focus .child { display: block; } It's important to note that the parent element has tabindex= ...

ioscssfocustabindexdescendant

Unleashing the power of Sass and CSS in your Next Js project

Trying to incorporate sass and css modules into my next.config.js has been challenging due to an error I keep encountering: Failed to compile. ./node_modules/@riskalyze/react-ui/node_modules/@riskalyze/calendar/assets/index.css Unknown word (1:1) > 1 ...

csssassnext.jscss-loader

Update the picture displayed in the parent div when it is in an

My code currently changes the image when a parent div is in an active state, but I'm struggling to figure out how to revert it back to the original image when clicked again. I attempted to use 'return false' at the end of the script, but it ...

javascripthtmljquerycss

Leveraging class names to dynamically apply CSS styles to components based on their props value

In the process of developing a collection of reusable components, I have utilized material-ui and styled them with CSS. One specific requirement is to dynamically set the width of a component through a prop passed into a custom button. My goal is to lever ...

javascriptcssreactjsmaterial-uiclass-names

Achieving uniform width in material ui: Tips for maintaining consistency

I am encountering an issue with the width of my Goal components and can't figure out what is causing it. https://i.stack.imgur.com/jPlyf.png Despite setting the width of the Paper selector to 100%, each Goal component's width remains inconsiste ...

javascriptreactjsmaterial-uijss

Trouble with activating the full screen feature on YouTube embedded in an HTML iframe

I created a website with a YouTube video, and in order to have a separate thumbnail, I used the following code: <div class="embed-responsive embed-responsive-16by9 youtube" style="height: 130px; width: 240px; " src="http://molugu.com/yantraev/divayou ...

javascripthtmljquerycssiframe

"Encountering a Reactjs error when trying to render a

Currently, I am engrossed in a React JS tutorial but seem to have hit a roadblock with the following error: Failed to compile. Error in ./src/Components/Projects.js Syntax error: Unexpected token (15:10) return { <ProjectItem key={projec ...

javascriptnpmsyntax-errorreactjs

Ways to expand the border horizontally using CSS animation from the middle

Currently, I am experimenting with CSS animation and I have a query regarding creating a vertical line that automatically grows in length when the page is loaded. I am interested in making the vertical line expand from the center in both upward and downwar ...

javascriptjqueryhtmlcsscss-animations

How can I dynamically change the default value of the selected option dropdown in React-Select when a new option is chosen?

Can you help me understand how to update the default displayed value on a dropdown in a react-select component? When I choose a different option from one dropdown, the select dropdown value does not change. I've attempted this.defaultValue = option.va ...

javascriptreactjsdropdownreact-select

As I traverse along a row and delete a cell that matches - the 'replace' method is not available

My goal is to loop through a set of td elements within a tr and remove the first one that contains a specific string (each cell holds a word and there will only be one match). The issue lies in this block of code: $('#row > td').each(function ...

javascriptjquery

Creating a dynamic menu structure by tailoring it to the specific elements found on each page

Currently, I am facing issues while attempting to generate a dynamic menu based on the elements present on the page. Is there a way to develop a menu using the following code structure?: <div class="parent"> <div class="one child" id="first"& ...

javascriptjqueryhtml