There is a markup:

<span class="left">соль</span> <span class="right">2гр</span><br> <span class="left">сахар</span> <span class="right">2гр</span> .left{float:left;} .right{float:right;}

It is necessary to put dynamically between two span points. I can not make it static, because I do not know in advance the length of the word. How best to implement it?

  • one
    You can use the background with a repetition of the horizontal - Dmitriy Simushev
  • one
    The dots are essentially border-bottom: 1 (2,3,4) px dotted # 333. Just between them is a block with this border. - NeedHate

2 answers 2

JS is not needed here at all, - you can do with CSS alone.

Code:

 .row { width: 100%; display: table; table-layout: auto; padding-bottom: 0.5em; } .left, .right { width: auto; display:table-cell; margin-bottom: -0.5em; } .left { float:left; padding-right: 0.25em; } .right { float:right; padding-left: 0.25em; } .separator { border-bottom: 1px dotted black; display: table-cell; width: inherit; } 
 <div class="row"> <span class="left">соль</span> <span class="separator"></span> <span class="right">2гр</span> </div> <div class="row"> <span class="left">сахар</span> <span class="separator"></span> <span class="right">2гр</span> </div>

Explanations:

  • A parent element with a width of 100% makes the string stretch to the full width.
  • display: table; and display:table-cell; force the browser to perceive an element as a table or a table cell, respectively.
  • width: inherit; - Tells the element to inherit the width of the parent (100%). Normally, this would make the separator take up the entire width of the parent, but in the table, in the absence of explicitly specified rows, the browser places all the cells in one row, limiting the separator to the available (not occupied by other cells) width.

    Let the method a little barbaric, but still. The essence is in wrapping a single line diva and assigning a pseudo-element with a repeating horizontal background - a picture of a dot and a space. If the font size is constant, you can wrap all the spans at once with one diva, then the height of the image should be equal to line-height . http://codepen.io/malginovdesign/pen/NNaajv?editors=1100 As already written above, you can use border-bottom: 1px dotted; instead of background border-bottom: 1px dotted; - works great.

     .left{ left: 0; } .right{ right: 0; } .left, .right { background: #f5f5f5; z-index: 2; position: absolute; } .row { position: relative; background: #f5f5f5; height: 1.2em; } .row:after { content:''; position: absolute; bottom: 0.3em; left: 0; width: 100%; height: 100%; background: url(https://box.everhelper.me/attachment/435173/c5e2217d-449a-4bfd-b77c-09ce861ed3c5/552479-3lax16SYwGefxRbJ/screen.png) repeat no-repeat; background-position-y: bottom; z-index: 1; } 
     <div class="row"> <span class="left">соль</span> <span class="right">2гр</span> </div> <div class="row"> <span class="left">сахар</span> <span class="right">2гр</span> </div>