Search code examples
htmlcsslineword-wrapline-breaks

Automatic word spacing to fit line CSS


How can i make the word spacing automatically expand in order to fit the containers width?

Image example

<p class="autoWrap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente consectetur vero laboriosam cum quisquam aliquam molestiae minima, ratione a rem, mollitia neque est velit, rerum voluptas tenetur voluptate recusandae modi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, unde corrupti cum doloribus dolorem repudiandae consequatur quaerat qui soluta dignissimos fuga nulla aspernatur vero nesciunt enim earum sunt repellendus itaque. Lorem ipsum dolor sit amet earum 
Natus laboriosam earum harum molestiae quaerat doloremque! Error quas asperiores</p>
.autoWrap {
  max-width: 500px;
  /* magic word wrap property here */
}

Solution

  • You can use text-align: justify; You can read more about here: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

    Working example below

    .autoWrap {
        text-align: justify;
    }
    <p class="autoWrap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente consectetur vero laboriosam cum quisquam aliquam molestiae minima, ratione a rem, mollitia neque est velit, rerum voluptas tenetur voluptate recusandae modi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, unde corrupti cum doloribus dolorem repudiandae consequatur quaerat qui soluta dignissimos fuga nulla aspernatur vero nesciunt enim earum sunt repellendus itaque. Lorem ipsum dolor sit amet earum 
    Natus laboriosam earum harum molestiae quaerat doloremque! Error quas asperiores</p>