html - 如何通过CSS重新组合文本？

Question

当我缩小页面大小时，我需要重新组合我的文本。当前的行为是这样的:当我更改页面大小时，文本不会重新组合。我该如何解决？

这是我的 fiddle 示例:

https://jsfiddle.net/v7386L2a

附言:

我不能使用 width: XX%; 因为我想在缩小页面大小时删除空格。

Answer 1

您应该删除宽度属性 (如果您确实需要宽度，请使用 max-width 而不是 width) 并像这样使用自动换行。在 div 而不是 main 上应用 css。现在您可以尝试调整页面大小，看看这是否是您需要的。

div {
    max-width:1024px;
    margin: 0 auto;
    background-color: rgba(117, 128, 128, 0.27);
    word-wrap:break-word;
}

<main>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis lectus ut dui iaculis vehicula.
        Vestibulum molestie nunc id odio condimentum, eu efficitur justo laoreet. Phasellus urna elit, fringilla ut
        tempus
        sed, varius non augue. Proin tempor, odio nec malesuada bibendum, tortor lorem elementum risus, facilisis
        fringilla
        nunc mauris ac nisi. Nulla porta ac arcu quis eleifend. Nunc vulputate leo non lorem interdum commodo. Aliquam
        ac
        massa maximus, pharetra velit ac, lobortis lorem. Orci varius natoque penatibus et magnis dis parturient montes,
        nascetur ridiculus mus. Mauris vehicula interdum semper. Pellentesque tincidunt eget dui eu placerat. Curabitur
        auctor dui ac est scelerisque, in fringilla nibh mollis. Lorem ipsum dolor sit amet, consectetur adipiscing
        elit.
        Pellentesque quis lectus ut dui iaculis vehicula. Vestibulum molestie nunc id odio condimentum, eu efficitur
        justo
        laoreet. Phasellus urna elit, fringilla ut tempus sed, varius non augue. Proin tempor, odio nec malesuada
        bibendum,
        tortor lorem elementum risus, facilisis fringilla nunc mauris ac nisi. Nulla porta ac arcu quis eleifend. Nunc
        vulputate leo non lorem interdum commodo. Aliquam ac massa maximus, pharetra velit ac, lobortis lorem. Orci
        varius
        natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vehicula interdum semper.
        Pellentesque tincidunt eget dui eu placerat. Curabitur auctor dui ac est scelerisque, in fringilla nibh mollis.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis lectus ut dui iaculis vehicula.
        Vestibulum molestie nunc id odio condimentum, eu efficitur justo laoreet. Phasellus urna elit, fringilla ut
        tempus
        sed, varius non augue. Proin tempor, odio nec malesuada bibendum, tortor lorem elementum risus, facilisis
        fringilla
        nunc mauris ac nisi. Nulla porta ac arcu quis eleifend. Nunc vulputate leo non lorem interdum commodo. Aliquam
        ac
        massa maximus, pharetra velit ac, lobortis lorem. Orci varius natoque penatibus et magnis dis parturient montes,
        nascetur ridiculus mus. Mauris vehicula interdum semper. Pellentesque tincidunt eget dui eu placerat. Curabitur
        auctor dui ac est scelerisque, in fringilla nibh mollis.
    </div>
</main>