How can i make the word spacing automatically expand in order to fit the containers width?
<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>