To make the text across the entire width, I used align = "justify". Everything turned out, but one bug appeared: large spaces are created in the text. How to fix? enter image description here

  • one
    This is not a bug, this is the correct execution of the align = 'justify' property. To avoid large spaces - you need to use the alignment of any edge. - Legionary
  • In Microsoft Word, there are no such gaps. It is likely that HTML has a way to eliminate them. - Denis Pavlik
  • Try to play around with the width of the container in which the text and indents or try to rethink the text. - ogorank

3 answers 3

Use ­ .

Compare the first option (without transfer) and the second (with the transfer of words)

enter image description here

 div{ width: 200px; text-align: justify; font-size: 20px; border: 1px solid #000; margin: 20px; font-family: verdana; } 
 <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> <div>Lorem ipsum dolor sit amet, con&shy;secte&shy;tur adip&shy;isi&shy;ci&shy;ng elit.</div>

    Do not be fooled, this action is not a bug. This is the standard full-length alignment behavior ( align="justify" )

    For example, in MS Word there are the same spaces.
    Here is an example: enter image description here

    This is due to the fact that if the length of a word ported to a new line exceeds the allowable size of the field, if it is placed on the previous line, the word is moved downwards, respectively, that line previous, it stretches along the entire length.

    As a solution you need either:

    1. Make edge alignment
    2. Customize the text to the size of the allowed field (if the text is static)
    3. Adjust the size of the field to the text (also if the text is static)
    4. Make peace (yes, this is also an option)
    • I wanted to try to break long words and transfer them to a new line using the hyphens property, but for some reason nothing happens. - Denis Pavlik
    • @ DenisPavlik as far as I know these properties are not supported in current versions of browsers. You can try the ready-made solution github.com/mnater/hyphenator - Legionary

    If to reconcile, as the previous speaker suggests, is not an option - there is a way to alleviate visual suffering a little. You can achieve the effect of improvement with the help of negative word-spacing . To achieve a more or less acceptable effect with the value will have to experiment.

     .text, .text-alt { text-align: justify; width: 400px; } .text-alt { word-spacing: -0.1ex; margin-top: 1em; } 
     <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quidem assumenda consequatur fugit quas dolorem similique tempora voluptatum eum perspiciatis incidunt hic perferendis cumque repellendus eaque quisquam pariatur soluta modi velit. Reprehenderit rem recusandae nostrum placeat ratione, quia iure, voluptatem ad voluptatibus a tempore dignissimos sit quaerat, voluptates. Molestiae nostrum, inventore deleniti, aspernatur odio aut repellat vitae quaerat mollitia quos aliquid dolorum quis reprehenderit, ut consequatur repellendus quisquam ipsum dolores. Rem minima velit non, quam reiciendis! Esse minima corporis architecto id vitae fuga. Consequatur asperiores veniam commodi, velit voluptatibus obcaecati expedita ipsam quo dicta similique animi fugiat quia magni libero.</div> <div class="text-alt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quidem assumenda consequatur fugit quas dolorem similique tempora voluptatum eum perspiciatis incidunt hic perferendis cumque repellendus eaque quisquam pariatur soluta modi velit. Reprehenderit rem recusandae nostrum placeat ratione, quia iure, voluptatem ad voluptatibus a tempore dignissimos sit quaerat, voluptates. Molestiae nostrum, inventore deleniti, aspernatur odio aut repellat vitae quaerat mollitia quos aliquid dolorum quis reprehenderit, ut consequatur repellendus quisquam ipsum dolores. Rem minima velit non, quam reiciendis! Esse minima corporis architecto id vitae fuga. Consequatur asperiores veniam commodi, velit voluptatibus obcaecati expedita ipsam quo dicta similique animi fugiat quia magni libero.</div>

    The first block of the text is the usual one, the second one is with a negative Word space.