Html 自动字间距以适应行CSS

发布于03月19日

如何使字间距自动扩展以适应容器宽度？

<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 */
}

推荐答案

你可以用text-align: justify; 你可以在这里阅读更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

下面的工作示例

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