Dashed tabulation fill in text blocks

Question

I'm attempting to mimic in HTML the following text style:

This is a style feature of Microsoft Word, which can be set by using Tab Fills.

This is what I've accomplished so far:

.legalese .paragraph:after {
  content: "------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------"; 
  width: 100%;
  height: 20px; 
  overflow: hidden; 
  display: block; 
  position: relative;
  top: -20px;
  z-index: -1;
  color: blue;
}

It's not a good solution (for what is worth, this is as far as I've come with this problem).

I've checked references such as this:

http://jsfiddle.net/FpRp2/171/ - Close, but no support for multiline text

Any ideas? Thanks!

Additional info

• The dashed fills are not for input. For legal reasons, these type of documents must not contain any writable whitespaces (either by hand or by printing). The idea is to strikethrough it all.

Answer 1

is contenteditable attribute what you are looking for ?

http://jsfiddle.net/FpRp2/172/

span {
    border-bottom: 1px dashed #333;
}

With :

<span contenteditable> &nbsp;&nbsp;&nbsp; </span>