Text Justified Spaces Between words

Navigation
0

I have a problem in paragraphs when I apply the text-justify class of bootstrap, the paragraphs are in small columns and when giving them justify spaces are created between words (I guess that is the algorithm so that everything is justified), but visually annoying Is there any reason to fix this?

example: 

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>
    
asked by Andress Blend 01.02.2017 в 14:49
source

3 answers

1

Justified text always has this problem, if the columns are not much wider than the words. 

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.

It should be distributed as: 

y   en   otras

This effect is unfortunately inevitable with fonts that are not proportional. What you might consider is that if another font can solve the problem.

    
answered by 01.02.2017 в 15:18
1

Precisely the "rivers" of white space damage readability, and is one of the reasons for not justifying text on the web ... however, if there are options ...

  • You can add the {hyphens: auto;} style to the text container, so that the browser (at its discretion) separates the hyphenated words (if possible) to use the blank space. This is something that varies from browser to browser, i.e., you can not control it accurately.
  • The other option, allows you to control it with precision, but if your content is too long, or it will be editable by another person (for example as in some CMS), it will be a bit cumbersome, however, here goes ... you can manually separate the words, using the entity &shy; where you think a script can go ... for example, in the text, the first word that could be worked is "some", which you could change by al&shy;gunas or even algu&shy;nas , the browser will be responsible for putting the script and the rest to the next line ... if there is not enough space, the script will not be displayed.

    • I hope it helps you.

        
    answered by 06.12.2018 в 05:49
    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>
        
    answered by 01.02.2017 в 15:21
    Error exporting data to Excel from C # Error LNK2019 and LNK 1120 visual c ++ 2012 using SDL