2

Solicito de su ayuda debido a que cuento con un inconveniente debido a que necesito por medio de css, justificar el texto y adicional a esto el texto dentro del div debe ocupar todo el contenido del div sin dejar espacios en blanco, si es posible que los espacios entre los caracteres crezacan para ocupar todo el contenido del div, algo muy similar como lo hace 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>

El resultado deseado es que el texto ocupe todo el div si dejar ningún espacio, por favor fijarse en la última línea, se debería ajustar por espacios entre caracteres para llenar el recuadro. La línea que esta de color azul no tiene ninguna relevancia.

<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>

2
  • Es posible que puedas dar un poco mas de información, tal vez algún ejemplo? para así saber que es lo que buscas realmente y se pueda llegar a la respuesta que deseas. el 28 ago. 2018 a las 23:15
  • @Dєηyη Crawford adjunte un trozo de código para ser más claro y especifico
    – Gdaimon
    el 29 ago. 2018 a las 17:07

2 respuestas 2

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>

2
  • la última línea se debería ajustar al final del div justificando todo el texto, de tal manera que si requiere que se adicionen espacios entre los caracteres se realice
    – Gdaimon
    el 29 ago. 2018 a las 17:09
  • Edité la respuesta para agregar la propiedad text-align-last: justify;. si no deseas usar clases, puedes agregarla directamente en tu div { text-align: justify; text-align-last: justify; } css, como lo pones en tu ejemplo. Este línea es innecesaria text-justify: inter-word;
    – DjCrazy
    el 30 ago. 2018 a las 12:56
2

Para justificar el texto y utilizar todo el espacio puedes utilizar lo siguiente

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

Ejemplo:

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>

1
  • la última línea se debería ajustar al final del div justificando todo el texto, de tal manera que si requiere que se adicionen espacios entre los caracteres se realice
    – Gdaimon
    el 29 ago. 2018 a las 17:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.