CSS Text Align Justify Big Spaces

.sample_test {
  display: block;
  margin: 0 auto;
  width: 400px;
  height: auto;
}

.sample_test p {
  /* word-break: break-all; */
  hyphens: auto;
}

<div class="sample_test" lang="en">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it.</p>
  <p>Contrary to popular belief,.. It has roots in a piece of classical Latin literature from 45 BC,</p>
  <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
    you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary
    of over 200 Latin words,</p>
</div>

How to fix spaces in bootstrap justified text columns?

That's the way as text-align: justify works. It appends equal space between words to keep the text justified, if you fix it it wouldn't be justified anymore.

I think the solution is keeping one column on a small screen

<div id="third-div" class="page-div">
    <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12">
          <h1>Lots of text</h1>
          <h2 class="fio">But divided: two columns</h2>
          <p> a lot of text here  </p>
        </div>

        <div class="col-lg-6 col-md-12 col-sm-12">
          <p> a lot of text here </p>
        </div>
    </div>
</div>

This way they should go under each other like a single column and there would be enough space to optimize the justifying the text.

Should I avoid using text-align: justify; ?

Firstly, this is purely a design-related problem and solution. The design of your grid specifies if justifying text is needed. I think justify align alone has no major effect on usability. Bad typography that makes text illegible is what decreases usability. That said, make sure you have solid contrasts and a good balance of spacing in your type. Font-size matters too.

This site is a successful attempt at justifying text online. Since you can't control the spaces between letters and words nearly as much with CSS as you can with InDesign, it's a lot harder to justify text and not have 'rivers' of whitespace run down your rows, which happens when the spaces between words exceeds the spaces between lines. Things that make justifying text difficult: long words, row widths that don't hold enough words, and too much contrast between the text and the background colors; they make the rivers appear wider and more apparent.

The typographic ideal is to have an even text-block, where if you squint the text block becomes a uniform solid shade. So if you keep text at about 10px and 60% gray on white background, and have rows that fit about 20 words, justify align shouldn't look ugly. But keep in mind this does nothing to improve usability. Small, relatively light text annoys a lot of people, especially the older readers.

I should note that with ­ (soft hyphenation) correctly separating long troublesome words like super­awesome you can mimic proper typesetting (e.g. InDesign). There's a lot of stuff out there to help you do this. I would recommend the logic for hiding, manipulating, and displaying the text to be done on the client side, perhaps with this.

Edit: As others mention below, css hyphens are possible now, except not feasible (not in Chrome). Plus, css4 offers even more control.

CSS text justify with letter spacing

Here's a script which can do it. It isn't pretty, but maybe you can hack it to meet your needs. (Updated to handle resizing)

function SplitText(node) {  var text = node.nodeValue.replace(/^\s*|\s(?=\s)|\s*$/g, "");
  for (var i = 0; i < text.length; i++) {    var letter = document.createElement("span");    letter.style.display = "inline-block";    letter.style.position = "absolute";    letter.appendChild(document.createTextNode(text.charAt(i)));    node.parentNode.insertBefore(letter, node);
    var positionRatio = i / (text.length - 1);    var textWidth = letter.clientWidth;
    var indent = 100 * positionRatio;    var offset = -textWidth * positionRatio;    letter.style.left = indent + "%";    letter.style.marginLeft = offset + "px";
    //console.log("Letter ", text[i], ", Index ", i, ", Width ", textWidth, ", Indent ", indent, ", Offset ", offset);  }
  node.parentNode.removeChild(node);}
function Justify() {  var TEXT_NODE = 3;  var elem = document.getElementById("character_justify");  elem = elem.firstChild;
  while (elem) {    var nextElem = elem.nextSibling;
    if (elem.nodeType == TEXT_NODE)      SplitText(elem);
    elem = nextElem;  }}

#character_justify {  position: relative;  width: 40%;  border: 1px solid red;  font-size: 32pt;  margin: 0;  padding: 0;}
#character_justify * {  margin: 0;  padding: 0;  border: none;}

<body onload="Justify()">  <p id="character_justify">    Something<br/> Like    <br/> This  </p></body>