0

Tengo un problema en parrafos cuando aplico la clase text-justify de bootstrap, los parrafos están en columnas pequeñas y al darles justify se crean espacios entre palabras (supongo yo que es el algoritmo para que todo quede justificado), pero visualmente molesta hay alguna razon de arreglar esto?

ejemplo :

el texto queda 
así con  mucho
espacio     en
algunas lineas
y en     otras
no.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-xs-12 col-md-3 col-sm-6">
                     <div class="thumbnail thumb-shadow">
                        <img src="img/comunication.png" alt="Plataformas Customizables">
                        <div class="caption">
                           <h3>Comunicación, Análisis y apoyo</h3>
                           <p class="pservices text-justify">
                              La filosofía de AGM pone en primer lugar la satisfacción del cliente, por ello hacemos uso de herramientas de comunicación accesibles y prácticas como Skype, WhatsApp y correo electrónico para establecer comunicación con tigo y documentar, establecer y definir alcances, requerimientos y procedimientos para solucionar tus necesidades.
                           </p>

                        </div><br><br>
                      <!--  <span style="bottom: 40px !important; position:absolute;" class=" btn-seemore ">Saber más.</span> -->
                     </div>
                  </div>

5
  • Hola @Andress Blend podrías publicar el código para ver si hay una solución mas rápida?
    – JDavid
    Commented el 1 feb. 2017 a las 14:04
  • listo, editado. Commented el 1 feb. 2017 a las 14:11
  • @AndressBlend hice la prueba y tu codigo hace lo contrario a lo que tu afirmas Commented el 1 feb. 2017 a las 14:15
  • a mino, mira como e me ve. postimg.org/image/qwn56xi2l Commented el 1 feb. 2017 a las 14:18
  • @AndressBlend, en la imagen se puede ver que el texto esta "justificado" y que no sucede lo que mencionas. Se puede ver que el espacio se distribuye proporcionalmente entre las palabras de cada renglón.
    – Marcos
    Commented el 1 feb. 2017 a las 14:43

4 respuestas 4

1

Texto justificado siempre tiene este problema, si las columnas no son mucho más ancho que las palabras.

el texto queda 
así con  mucho
espacio     en <- eso es inevitable
algunas lineas
y en     otras <- eso se ve como error de algoritmo de justificación
no.

Debería ser distribuido como:

y   en   otras

Este efecto lamentablemente es inevitable con fonts que no son proporcionales. Lo que podrías considerar es que si otro font te puede solucionar el problema.

1
1

Justamente los "rios" de espacio en blanco perjudican la legibilidad, y es una de las razones para no justificar texto en la web... sin embargo, si hay opciones...

  1. Puedes agregar al contenedor del texto el estilo {hyphens: auto;}, para que el navegador (a discreción) separe las palabras con guión (si se puede) para usar el espacio en blanco. Esto es algo que varía de navegador en navegador, i.e., no puedes controlarlo con precisión.
  2. La otra opción, te permite controlarlo con precisión, pero si tu contenido es muy largo, o va a ser editable por otra persona (por ejemplo como en algun CMS), va a ser un poco engorroso, sin embargo, aqui va... puedes separar tu manualmente las palabras, usando la entidad &shy; donde consideres que puede ir un guión... por ejemplo, en el texto, la primera palabra que podría trabajarse es "algunas", que podrías cambiar por al&shy;gunas o incluso algu&shy;nas, el navegador se encargará de poner el guión y el resto a la siguiente linea... si no hay espacio suficiente, el guión no se mostrará.

Espero te sirva de ayuda.

0

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="col-xs-12 col-md-3 col-sm-6">
    <div class="thumbnail thumb-shadow">
      <img src="http://www.continued-learning.com/img/logos/bootstrap.png" alt="Plataformas Customizables">
      <div class="caption">
        <h3>Comunicación, Análisis y apoyo</h3>
        <p class="pservices text-justify">
          La filosofía de AGM pone en primer lugar la satisfacción del cliente, por ello hacemos uso de herramientas de comunicación accesibles y prácticas como Skype, WhatsApp y correo electrónico para establecer comunicación con tigo y documentar, establecer
          y definir alcances, requerimientos y procedimientos para solucionar tus necesidades.</p>

      </div>
      <br>
      <br>
      <!--  <span style="bottom: 40px !important; position:absolute;" class=" btn-seemore ">Saber más.</span> -->
    </div>
  </div>
</div>

2
  • esos ya los tenía desde arriba del html, gracias. Commented el 1 feb. 2017 a las 14:29
  • Que pena contigo no me había fijado en ese detalle, de igual forma el código que he realizado funciona.
    – JDavid
    Commented el 1 feb. 2017 a las 14:33
0

Puedes agregar al contenedor del texto el estilo {letter-spacing: 0.025em;}, para que la separación entre palabras sea menor y solucionar este tipo de problema, claro está que igual puede haber algo de separación entre palabras.

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.