Fill in empty space with dots

Question

I'm trying to get the same result as this question, but unable to. I would add a comment, but I don't have enough reputation.

Here's my current code.

dl {
  width: 400px
}

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

dd {
  float: left;
  width: 100px;
  overflow: hidden
}

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

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">

<dl>

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

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

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

</html>

When I try HTML5, <!DOCTYPE html><html>, it doesn't work at all!

What code will work with the following DOCTYPE?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

The first doctype you show is the current one for all new web pages and is required. The second one you show is for XHTML only. You shouldn't be using the second one because I'm sure you aren't serving XHTML despite the XML prologue in your markup. What you show is a mish-mash of markup that is confusing. — Rob, Jul 12 '17 at 03:27

score 5 · Answer 1 · answered Jul 12 '17 at 02:16

5

You need to:

wrap each of them sections with dl
add the CSSdd { margin: 0 }

dd {  margin: 0  }

dl {
  width: 400px
}

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

dd {
  float: left;
  width: 100px;
  overflow: hidden
}

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

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

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

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

answered Jul 12 '17 at 02:16

Chris Happy

7,088
2
22
49

Oh god!... Now this fail when I try create my page INDEX using DOMPDF :'( Any idea please? – Stackoverflow Jul 12 '17 at 02:41
Sorry @Stackoverflow I did not see your message until now. Were you able to resolve it? – Chris Happy May 28 '20 at 18:40
Thanks by your interesting, that was a work for university, I leave that now... :-) is possible contact a user (email, PM) in StackOverflow.com? – Stackoverflow May 29 '20 at 09:53
@Stackoverflow You could create a chat room: https://chat.stackoverflow.com/rooms/new – Chris Happy May 29 '20 at 17:57

Fill in empty space with dots

1 Answers1