Fill points empty space between words



  • A paper that looks like a headline in the book should be implemented:
    Part of the text on the row is attached to the left, part to the right, and the distance between the end of the left and the beginning of the right is filled with points.
    There'll be a few lines.
    However, the length of the text from both ends is not known in advance, may change, and each line will be different.



  • I'd do that.

    ul li,
    ol li {
      list-style: none;
    }
    

    ol li {
    display: flex;
    justify-content: space-between;
    }

    li div:nth-child(2) {
    flex: 1 0;
    border-bottom: 1px dotted #000;
    height: 1em;
    margin: 0 .4em;
    }

    <div class="book">
    <h1>Оглавление</h1>
    <ul>
    <li>Предисловие</li>
    <li>
    <ol>
    <li>
    <div>Завязка</div>
    <div></div>
    <div>стр. 1</div>
    </li>
    <li>
    <div>Кульминация</div>
    <div></div>
    <div>стр. 10</div>
    </li>
    <li>
    <div>Развязка</div>
    <div></div>
    <div>стр. 100</div>
    </li>
    </ol>
    </li>
    <li>Послесловие</li>
    <li>Об авторе</li>
    </div>


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2