英文断句：理解 word-wrap、word-break用法

最新推荐文章于 2024-01-29 14:42:43 发布

Dariuslwk

最新推荐文章于 2024-01-29 14:42:43 发布

阅读量596

点赞数 1

分类专栏： DAYNOTE 文章标签： css html

本文链接：https://blog.csdn.net/qq_44158936/article/details/105082914

版权

DAYNOTE 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

1、定义与属性

1.1、word-wrap

允许长单词换行到下一行

语法

word-wrap: normal|break-word;

值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。

1.2、word-break

在恰当的断字点进行换行

语法

word-break: normal|break-all|keep-all;

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

2、案例分析

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>断句</title>
        <style type="text/css">
            .text1{
                width: 120px;
                height: 100px;
                background-color: gray;
                word-wrap: break-word;
            }
            .text2{
                width: 120px;
                height: 100px;
                background-color: red;
                word-break: break-all;
            }
        </style>
    </head>
    <body>
    <p class="text1">There is no royal road to learning.</p>
    <p class="text2">There is no royal road to learning.</p>

    </body>
</html>

在这里插入图片描述