0

Estoy trabajando en el documento .css, pero mi párrafo al "justificarlo" no queda agradable ya que adiciona demasiados espacios.

.container {
  text-align: justify;
  text-justify: inter-word;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<div class="col-lg-4 ml-auto">
  <p class="lead" align="justify">Un año después Larry y Sergey, ahora los estudiantes de Stanford ciencias de la computación graduado, han comenzado a colaborar en un motor de búsqueda llamado BackRub. BackRub ha operado en los servidores de Stanford por más de un año-finalmente ha
    ocupado demasiado ancho de banda para adaptarse a la universidad.</p>
</div>

4
  • A que te refieres con demasiados espacios? yo veo el texto formateado de manera correcta Commented el 23 jul. 2018 a las 21:07
  • Con la propiedad word-spacing, puedes controlar el espacio entre las palabras, pero no creo que te ayude con tu problema, igual revisa mi respuesta. Commented el 23 jul. 2018 a las 21:13
  • @LeviArista el inter-espaciado que automáticamente genera la justificación, mi pregunta es si ese inter-espaciado se puede ajustar o modificar a gusto.
    – CammoLC
    Commented el 23 jul. 2018 a las 21:48
  • Ah, pues parece que no, a no ser que te sirva la respuesta que te han dado, podrias intentar con metodos mas complicados, pero seria complicarte la vida por las puras xd Commented el 23 jul. 2018 a las 22:43

1 respuesta 1

0

La forma más rápida de controlar el espacio entre las palabras es con la propiedad word-spacing, pero no es la solución mágica que buscas, ya que los ríos de blancos son propios del texto justificado en espacios angostos, lo mejor es que determines cuando es demasiado usando media queries para que se justifiquen más a la izquierda.

*{
 box-sizing: border-box;
}

body{
  font-family: arial;
}

.col-lg-4{
  width: calc(100% / 4.1);
  display: inline-flex;
  padding: 5px;
}

.lead{
    text-align: justify;
    text-justify: inter-word;
}

.ws01{
    word-spacing: .05em;
}
.ws02{
    word-spacing: .5em;
}

.ws03{
    word-spacing: 1em;
}
.ws04{
    word-spacing: 2em;
}

@media (max-width: 840px){
  .col-lg-4{
    width: calc(100% / 2.1);
  }
}
<div class="col-lg-4 ml-auto">
  <p class="lead ws01" align="justify">Un año después Larry y Sergey, ahora los estudiantes de Stanford ciencias de la computación graduado, han comenzado a colaborar en un motor de búsqueda llamado BackRub. BackRub ha operado en los servidores de Stanford por más de un año-finalmente ha ocupado demasiado ancho de banda para adaptarse a la universidad.</p>
</div>

<div class="col-lg-4 ml-auto">
  <p class="lead ws02" align="justify">Un año después Larry y Sergey, ahora los estudiantes de Stanford ciencias de la computación graduado, han comenzado a colaborar en un motor de búsqueda llamado BackRub. BackRub ha operado en los servidores de Stanford por más de un año-finalmente ha ocupado demasiado ancho de banda para adaptarse a la universidad.</p>
</div>

<div class="col-lg-4 ml-auto">
  <p class="lead ws03" align="justify">Un año después Larry y Sergey, ahora los estudiantes de Stanford ciencias de la computación graduado, han comenzado a colaborar en un motor de búsqueda llamado BackRub. BackRub ha operado en los servidores de Stanford por más de un año-finalmente ha ocupado demasiado ancho de banda para adaptarse a la universidad.</p>
</div>

<div class="col-lg-4 ml-auto">
  <p class="lead ws04" align="justify">Un año después Larry y Sergey, ahora los estudiantes de Stanford ciencias de la computación graduado, han comenzado a colaborar en un motor de búsqueda llamado BackRub. BackRub ha operado en los servidores de Stanford por más de un año-finalmente ha ocupado demasiado ancho de banda para adaptarse a la universidad.</p>
</div>

1
  • Gracias Edgar, me ha servido de algo, como dices, no completamente pero si parcialmente, saludos
    – CammoLC
    Commented el 23 jul. 2018 a las 21:49

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.