CSS Justify text, fill space with dots [duplicate]

by

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 &middot; for example. (This is no problem as @Radek points out, as UTF-8 characters should be able to serve almost every need here).

More Related Contents:

  1. Margin on child element moves parent element
  2. Make a div into a link
  3. How do I center align horizontal menu?
  4. Should I avoid using !important in CSS?
  5. IE 8: background-size fix [duplicate]
  6. CSS: Hover one element, effect for multiple elements?
  7. xHTML/CSS: How to make inner div get 100% width minus another div width
  8. Cols, colgroups and css “:hover” pseudoclass
  9. Can we use any other TAG inside along with ? [duplicate]
  10. Replacing H1 text with a logo image: best method for SEO and accessibility?
  11. For div to extend full height
  12. html5 vertical spacing issue with
  13. CSS Parent/Ancestor Selector [duplicate]
  14. Select inputs and text inputs in HTML – Best way to make equal width?
  15. Vertical and horizontal align (middle and center) with CSS [duplicate]
  16. Why and not taking font-family and font-size from body?
  17. how to set background image in submit button?
  18. Why shouldn’t I use position:absolute for positioning everything?
  19. How to remove the stripes that appears when using linear gradient property [duplicate]
  20. css vertical centering
  21. Hover effect : expand bottom border
  22. Why can’t you group descendants in a CSS selector?
  23. How can I set the width of select box options?
  24. How to compile or convert sass / scss to css with node-sass (no Ruby)?
  25. What is the meaning of `auto` value in a CSS property.
  26. Bootstrap Modal sitting behind backdrop
  27. Bootstrap change div order with pull-right, pull-left on 3 columns
  28. How can I align 3 divs side by side?
  29. How to override the properties of a CSS class to avoid copying and renaming styles
  30. text overflow ellipsis: avoid word break

Leave a Comment