CSS Justify Text, Fill Space with Dots

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

css justify with flexbox (no table): fill empty space with dots

I think it would be better if you would not use the "....." as a content in the after but you make it fill up all the available space an use a border bottom in the after something like this:

ul.submenu li {
    line-height: 1.6rem;
    margin-left: 2rem;
    list-style-type: circle;
    text-transform: lowercase;
    width: 100%;
}
li.dish {
    display: flex;
    justify-content: space-between;
}
li.dish > div {
    display: flex;
    flex: 1;
}
li.dish span.short::after {
    content: " ";
    flex: 1;
    border-bottom: 1px dotted #000;
}
span.short {
    font-size: 0.8rem;
    font-style: italic;
    flex: 1;
    display: flex;
}
span.price {
    font-size: 1rem;
}

<ul>
  <li class=dish>
    <div> <a class=dish>Dish 1</a><span class=short>(Vis, Pastfdafdasa)</span></div>
    <span class=price>€</span>
  </li>
  
  <li class=dish>
    <div> <a class=dish>Dish 2</a><span class=short>(Vis, Pastcx\zc\xzcx\za)</span></div>
    <span class=price>€</span>
  </li>
  
  <li class=dish>
    <div> <a class=dish>Dish 3</a><span class=short>(Vis, Pastaczczcxz\cx\z)</span></div>
    <span class=price>€</span>
  </li>
</ul>

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>

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

make dots after text with auto size

All I can find is this article: http://www.w3.org/Style/Examples/007/leaders.en.html

Should get you on the right track :-)

There's also a new CSS3 technique for it: http://www.w3.org/TR/css3-gcpm/#leaders but I can't find any browser support references.

If screen size is mobile size ,replace the end of the HTML text with two dots

Use overflow: hidden; white-space: nowrap; in conjuntion with text-overflow: ellipsis;, the later displays the ... where text overflow is present on the content.

.flex-buttons {
  display: flex;
  flex-wrap: nowrap;
  background-color: aqua;
}

.flex-buttons > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 1.5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div class="flex-buttons">
  <div>Stackoverflow</div>
  <div>Stackoverflow</div>
  <div>Stackoverflow</div>
  <div>Stackoverflow</div>
  <div>Stackoverflow</div>
  <div>Stackoverflow</div>      
  <div>Stackoverflow</div>
</div>

CSS Justify Text, Fill Space with Dots