How to add an unknown amount of dots to a line depending on length of word?


Tags: javascript,html,css,html5,css3

Problem :

I am having trouble figuring out how to do the following in CSS/HTML:

Word 1.................................$45
Long Word 2............................$45
Long Word even longer..................$45
small..................................$45

I can't define how many dots there are for each word, because what the individual enters is dynamic. How can I make it so that there are the right amount of dots?

Edit: I am not using a monospace font



Solution :

How about a list:

<dl>
    <dt><span>Word 1</span></dt>
    <dd>$45</dd>

    <dt><span>Long Word 2</span></dt>
    <dd>$45</dd>

    <dt><span>ong Word even longer</span></dt>
    <dd>$45</dd>
</dl>

and then some CSS using pseudo classes and a few floats

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

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

FIDDLE

There are many other ways to do this as well, the point is to add a lot of dots to an element that has no overflow and adjusts to cover the space between the first text and the second (the price).


    CSS Howto..

    How to align a background image to bottom of table cells in css?

    How design an unordered list of images horizontally with Bootstrap?

    CSS - How to working with multi-level menu by simple

    How to style this button in CSS to appear pushed down?

    How to make a linear-gradient to fulfill two-coloured body in CSS

    How to cycle odd and even when using ajax append?

    How to set the horizontal menu to be center without setting the specific width

    How Do I Reduce the Padding Around a Chart Within an Article

    How to let a div behave like another div?

    CSS: How to make this kind layout?

    How can I differentiate Safari and Chrome in CSS?

    How To select a specific Div from its Class with JS

    How to fix the Height for this area?

    how to use two css style in a div or span

    Why does this menu render poorly in Firefox 3.5 and IE7? How do I adapt?

    Codeigniter Form Validation - Showing Errors Individually problems

    How do I change CSS submenu width so it doesn't used the same width as the main menu?

    How to keep text in textarea remain at the top?

    How can I turn off hardware acceleration for certain HTML elements via CSS?

    How to rotate a chart 90 degrees including the text values?

    How could I get a layout like the one shown in the attached image? [closed]

    how to make background-image included via a “class” responsive

    Show 100% of background

    How to style my unordered list like a table?

    How can I get horizontal overflows to work in CSS?

    How would I get my horizontal navigation bar to span the full width?

    How to make span width to be maximum using CSS?

    How to hide all checkboxes using CSS

    How can I increase input text elements' width via CSS?

    How do i add my own image to a button that links to another website in HTML & CSS?