Justify CSS text and enlarge space between characters

Navigation
2

I request your help because I have an inconvenience because I need to use css , justify the text and in addition to this the text within the div must occupy all the content of div without leaving spaces in white, if it is possible that the spaces between the characters grow to occupy all the content of div , something very similar as it does display: flex; justify-content: space-around; 

<div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur ipsa optio error explicabo. Atque harum nobis necessitatibus repellat, suscipit sit. Mollitia culpa, adipisci repellendus eaque aperiam molestiae odio nemo magni? Laborum exercitationem libero ut, dicta, consequuntur, quisquam inventore esse ipsa dolore consectetur explicabo assumenda? Ipsum alias totam minus quae. Eos tempore labore odit error quidem, eveniet neque delectus praesentium animi? Eveniet distinctio soluta officiis veniam suscipit, blanditiis voluptate quam perferendis veritatis deserunt ipsa similique atque, animi non quasi nulla, dolorum dolor laborum excepturi. Earum ea doloremque repudiandae rerum necessitatibus. Ut? Eum quia facilis aliquam perspiciatis illo mollitia sed ipsa repudiandae, harum voluptate sunt esse iure autem beatae officiis quae deserunt aperiam adipisci totam sint? Et veritatis sapiente dolor repellat laudantium. Maiores reiciendis illo a odio id in dignissimos ex vero, libero est quia amet odit repellat quasi iure. Delectus quidem officia numquam reiciendis, rem ut asperiores accusantium blanditiis eius nam? laborum excepturi similique atque repudiandae nemo earum ipsa. At omnis nostrum reiciendis quam laboriosam a provident illo. Minus a rem expedita voluptatum blanditiis ipsa impedit hic quia veritatis?
</div>

The desired result is that the text occupies all the div if leaving no space, please look at the last line, it should be adjusted by spaces between characters to fill the box. The line that is blue does not have any relevance. 

<html>

<head>
  <title>InfoShop</title>
  <style type="text/css">
    @page {
      margin-left: 25pt;
      margin-top: 15pt;
    }
    
    body {
      font: 6pt Verdana, Arial, Helvetica, sans-serif
    }
    
    .Arial05 {
      font: 5pt Arial
    }
    
    .Arial07 {
      font: 7pt Arial
    }
    
    div {
      text-align: justify;
      text-justify: inter-word;
    }
    
    a {
      color: blue;
      font: 6pt Arial
    }
  </style>
</head>

<body>
  <table width="730" align="CENTER" border="1" cellspacing="0" cellpadding="0">
    <tbody>
      <tr>
        <td align="left" valign="top">
          <font class="Arial05">
            <a title="Texto adicional">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque a harum ducimus fugiat aspernatur
                                vero alias dolorem maiores, sapiente odit itaque. Cupiditate quod laboriosam nemo fugit minima
                                minus suscipit necessitatibus.</a>
          </font>
          <font class="Arial07">
            <div>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque a harum ducimus fugiat aspernatur vero alias dolorem maiores, sapiente odit itaque. Cupiditate quod laboriosam nemo fugit minima minus suscipit necessitatibus. Lorem ipsum dolor sit amet consectetur
              adipisicing elit. Eaque a harum ducimus fugiat aspernatur vero alias dolorem maiores, sapiente odit itaque. Cupiditate quod laboriosam nemo fugit minima minus suscipit necessitatibus. Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Eaque a harum ducimus fugiat aspernatur vero alias dolorem maiores, sapiente odit itaque. Cupiditate quod laboriosam nemo fugit
            </div>
          </font>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>
    
asked by Gdaimon 29.08.2018 в 00:12
source

2 answers

4

.texto {
  text-align: justify;
  text-align-last: justify;
}
<div class="texto">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
    
answered by 29.08.2018 / 00:38
source
2

To justify the text and use the entire space you can use the following 

div {
  text-align: justify; text-justify: inter-word;
}

Example: 

div {
  background: red;
  height: 330px;
  width: 300px;
  text-align: justify;
  text-justify: inter-word;
}
<div>
  Lorem ipsum dolor sit amet consectetur adipiscing elit, penatibus donec congue quis condimentum justo, lacinia felis montes rhoncus metus neque. Arcu ligula interdum viverra sagittis pharetra elementum mollis eu, fringilla ut natoque scelerisque condimentum
  consequat montes curae, bibendum venenatis sodales fermentum penatibus libero semper. Natoque inceptos sociis curae cum magna tristique magnis sem sociosqu netus, odio torquent cursus senectus dignissim augue nullam euismod malesuada faucibus, enim
  penatibus felis ante litora taciti eu etiam donec.
</div>
    
answered by 29.08.2018 в 00:36
Hide and show according to AngularJS status Knowing if an image exists or not correctly charged