CSS3 单词换行 | 开创者教程

实例代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>开创者教程(kaicz.com)</title>
    <style>
        .example1 {
            word-break:keep-all;
        }
        
        .example2 {
            word-break:break-all;
        }

div{
        	width: 500px;
            height: 100px;
            border-radius: 10px;
            padding: 15px;
            background-color: #4a90e2;
            color: #fff;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <h1>CSS3 文本换行</h1>
    <div class="example1">The sun dipped below the horizon, painting the sky in hues of orange and pink. A gentle breeze rustled the leaves, carrying the faint scent of wildflowers. In the distance, the rhythmic chirping of crickets blended with the soft murmur of a nearby stream.</div>
	<div class="example2">The sun dipped below the horizon, painting the sky in hues of orange and pink. A gentle breeze rustled the leaves, carrying the faint scent of wildflowers. In the distance, the rhythmic chirping of crickets blended with the soft murmur of a nearby stream.</div>
</body>

</html>