Fiill the Space Between Two Text Elements with Dots

How to fill the space between two text elements with dots in Flutter

as an option

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(home: Home());
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Row(
        children: [
          Text('Burger'),
          Expanded(child: Text('.' * 100, maxLines: 1)),
          Text('\$9.99'),
        ],
      ),
    );
  }
}

Sample Image

Fiill the space between two text elements with dots

section {  display: flex;                     /* 1 */  align-items: baseline;             /* 2 */  margin-bottom: 10px;}section > * {  padding: 0;  margin: 0;}span {  flex: 1;                          /* 3 */  overflow: hidden;                 /* 4 */}

<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>

How do I fill the space between items with dots?

In case you want to stay classy and keep the prices lined up! Flexbox & some repeating linear gradients for more customization on the dotted part.

ol {
  width: 200px;
}

li {
  display: flex;
  width: 100%;
}

.price {
  flex-grow: 1;
  text-align: right;
  display: flex;
}

.price::before {
  content:'';
  background: repeating-linear-gradient(to right, currentColor, currentColor 1px, transparent 2px, transparent 4px);
  height: 1px;
  flex-grow: 1;
  display: inline-block;
  margin-top: 1em;
}

<ol>
  <li><span class="item">Toast</span><span class="price">$1.55</span></li>
  <li><span class="item">Eggs</span><span class="price">$2.12</span></li>
  <li><span class="item">Bacon</span><span class="price">$3.25</span></li>
  <li><span class="item">Short stack</span><span class="price">$4.00</span></li>
</ol>

Fill available spaces between labels with dots or hyphens

Try this: http://jsfiddle.net/FpRp2/4/ (updated, now works in ie7)

The solution @Marcel gave to use a dashed border instead of text hyphens solved the final issue with IE7.

(Note, I've only tested in Safari, Firefox and Chrome so far.)

EDIT: IE8 works. ~~Working on a fix for IE7.~~

HTML

<div class='outer'>
    <div class='container'>
        <div class='filler'></div>
        <span class='label'>some label</span>
        <span class='text'>some text</span>
    </div>
    <br>
    <div class='container'>
        <div class='filler'></div>
        <span class='label'>some other label</span>
        <span class='text'>some other text</span>
    </div>
</div>

CSS

.outer {
    display: inline-block;
    *display: inline;
    zoom: 1;
    position: relative;
    clip: auto;
    overflow: hidden;
}
.container {
    position: relative;
    text-align: right;
    white-space: nowrap;
}
.filler {
    position: absolute;
    left: 0;
    right: 0;
    border-bottom: 1px dashed #333;
    height: 50%;
}
.label {
    background: white;
    float: left;
    margin-right: 20px;
    padding-right: 4px;
    position: relative;
}
.text {
    background: white;
    padding-left: 4px;
    position: relative;
}

Fill remaining whitespace in line with dots (multiline text)

You can use :after to fill the available space with dots(.).. I have added overflow: hidden and position:relative at td level.

.text:after{
    content: " ....................................................................................................................... ";
    position: absolute;
    padding-left: 5px;
}

See the Snippet below:

.container {  width: 600px;  text-align: justify;  font-family: 'Arial Narrow', arial, sans-serif;}
table {  width: 100%;}
.incipit {  width: 10%;}td{    overflow: hidden;    position: relative;}
.text {   width: 90%;}.text:after{    content: " ....................................................................................................................... ";    position: absolute;    padding-left: 5px;}
.page {  width: 15px;}
.level-0 > .text {  width: 100%;}
.level-0 {  font-weight: bold;}
.level-1, .level-2 {  font-weight: bold;}

<div class="container">  <h2>  Table of Contents  </h2>  <table>  <tr class='level-0'>    <td class="text" colspan="2">First level index element</td>    <td class="page" align="right" valign="bottom">1</td>  </tr>  <tr class="level-1">    <td class="incipit" valign="top">Art. 1</td>    <td class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel elementum erat. In non magna tellus. Donec id tellus ut leo consequat elementum. Praesent eu ligula in neque ultricies mollis sit amet sed risus.</td>    <td class="page" align="right" valign="bottom">1</td>  </tr>  <tr class="level-2">    <td class="incipit" valign="top">Art. 2</td>    <td class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel elementum erat. In non magna tellus. Donec </td>    <td class="page" align="right" valign="bottom">2</td>  </tr>  </table></div>

CSS Justify text, fill space with dots

Here's an elegant and unobtrusive one with some limitations (see below).

JSFiddle

CSS:

dl { width: 400px }
dt { float: left; width: 300px; overflow: hidden; white-space: nowrap }
dd { float: left; width: 100px; overflow: hidden }

dt:after { content: " .................................................................................." }

HTML:

<dl>

    <dt>Drug 1</dt>
    <dd>10ml</dd>

    <dt>Another drug</dt>
    <dd>50ml</dd>

    <dt>Third</dt>
    <dd>100ml</dd>

</dl>

limitations:

Doesn't work in IE < 8
Accepts only literal characters in the content property, no HTML entities, so no · for example. (This is no problem as @Radek points out, as UTF-8 characters should be able to serve almost every need here).

Filling the space between two elements automatically, min Length?

I am able to make it work but there is a change of HTML structure.

<p>
  <span class="description-wrapper">
      <span class='descripcion'>Otro concepto más repartido entre más de una, o de dos, o de tres líneas de texto y así ver cómo se comporta en esta situación</span>
      <span class="blank-space-for-dots"></span>
  </span>
  <span class='precio'>1.694´99</span>
</p>

added CSS

/* added style */
.descripcion {
  background-color: #7658F9;
}
.blank-space-for-dots {
  width: 50px;
  display: inline-block;
}

you can control the min-width of the 'dotted line' by controlling the width of .blank-space-for-dots

This will add an empty space with transparent background after the .descripcion text ended.

https://codepen.io/jacobgoh101/pen/kkPqmO

How to fill the horizontal space between two divs using dotted/dashed line using CSS

Your template looks very suspiciously like svg lines that use stroke-dasharray and round strike-linecap

.getStarted {
  justify-content: center;
  align-items: center;
  text-align: center;
}
h3 {
  color: #006ebe;
  font-size: 2.3vw;
  margin-bottom: 100px;
}

.Icons {
  gap: 2vw;
  display: flex;
  justify-content: center;
}

.circle {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  padding: 10px;
  background: #0093ff;
  border: 3px solid #0093ff;
  color: white;
  text-align: center;
  font: 20px Poppins, sans-serif;
  font-weight: 600;
  line-height: 22px;
}

.dash {
  width: 10%;
  transform: rotate(-0.07deg);
}
.dash line {
  stroke: #0093ff;
  stroke-dasharray: 0.5 3.2;
  stroke-linecap: round;
}

<div id="getStarted" class="getStarted">
  <h3>How to get started?</h3>
  <div class="Icons">
    <div class="circle">

    </div>
    <svg class="dash" viewBox="-10 -5 20 10"><line x1="-9" x2="9"></line></svg>
    <div class="circle">

    </div>
     <svg class="dash" viewBox="-10 -5 20 10"><line x1="-9" x2="9"></line></svg>
     <div class="circle">

    </div>
  </div>
</div>

How to increase space between dotted border dots

This trick works for both horizontal and vertical borders:

/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

You can adjust the size with background-size and the proportion with the linear-gradient percentages. In this example I have a dotted line of 1px dots and 2px spacing.
This way you can have multiple dotted borders too using multiple backgrounds.

Try it in this JSFiddle or take a look at the code snippet example:

div {  padding: 10px 50px;}.dotted {  border-top: 1px #333 dotted;}.dotted-gradient {  background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);  background-position: top;  background-size: 3px 1px;  background-repeat: repeat-x;}.dotted-spaced {  background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);  background-position: top;  background-size: 10px 1px;  background-repeat: repeat-x;}.left {  float: left;  padding: 40px 10px;  background-color: #F0F0DA;}.left.dotted {  border-left: 1px #333 dotted;  border-top: none;}.left.dotted-gradient {  background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%);  background-position: left;  background-size: 1px 3px;  background-repeat: repeat-y;}.left.dotted-spaced {  background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);  background-position: left;  background-size: 1px 10px;  background-repeat: repeat-y;}

<div>no  <br>border</div><div class='dotted'>dotted  <br>border</div><div class='dotted-gradient'>dotted  <br>with gradient</div><div class='dotted-spaced'>dotted  <br>spaced</div>
<div class='left'>no  <br>border</div><div class='dotted left'>dotted  <br>border</div><div class='dotted-gradient left'>dotted  <br>with gradient</div><div class='dotted-spaced left'>dotted  <br>spaced</div>