Search code examples
htmlcsswhitespace

how to remove white space in justified css


If I am using
text-align:justify
paragraph shows unwanted space between words to maintain specified width. Searched in internet but didn't get any proper result. I used white-space also but no use

fiddle :fiddle


Solution

  • The closest solution would be using word-break: break-all but this will also break words. If you are ok with this then go with this solution:

    .sample_test p{
        word-break: break-all;
    }
    

    Fiddle

    Edit (Nov, 2021)

    Other closest better solution is using hyphens: auto. We have to mention the global attribute lang to the HTML element to make this work:

    .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>