css3新增样式（文本效果--- word-break 断点换行、word-wrap 长内容自动换行）

最新推荐文章于 2024-08-03 22:01:17 发布

正在修炼web的小芮

最新推荐文章于 2024-08-03 22:01:17 发布

阅读量384

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/m0_71814235/article/details/125932229

版权

css3 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

word-break 断点换行

word-break属性指定非CJK脚本的断行规则。

提示:CJK脚本是中国，日本和韩国（"中日韩"）脚本。

语法：

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

break-all:

    <style>
        .con{
            width: 400px;
            height: auto;
            margin: 50px auto 0;
            border: 1px solid skyblue;
            /* break-all 允许在单词内换行。*/ 
             word-break: break-all;
         
        }
    </style>
</head>
<body>
    <div class="con">
        When you look around, it’s fairly easy to spot imported products. From foods, electric devices  to cars, Chinese people now have more shopping choices thanks to global trade. But this wouldn’t be possible without one organization – the World Trade Organization (WTO).
    </div>
</body>

keep-all:

    <style>
        .con{
            width: 400px;
            height: auto;
            margin: 50px auto 0;
            border: 1px solid skyblue;
            /*  break-all 允许在单词内换行。 */
            /* word-break: break-all; */
            /*keep-all 只能在半角空格或连字符处换行。 */
            word-break: keep-all;
        }
    </style>
</head>
<body>
    <div class="con">
        When you look around, it’s fairly easy to spot imported products. From foods, electric devices  to cars, Chinese people now have more shopping choices thanks to global trade. But this wouldn’t be possible without one organization – the World Trade Organization (WTO).
    </div>
</body>

预览效果图

word-wrap 长内容自动换行

word-wrap属性允许长的内容可以自动换行。

语法：

word-wrap: normal|break-word;

    <style>
        .con{
            width: 400px;
            height: auto;
            margin: 50px auto 0;
            border: 1px solid skyblue;
            /* break-word 长内容自动换行*/
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <div class="con">
        When you look around, it’s fairly easy to spot importedimportedimportedimportedimportedimportedimportedimported products. From foods, electric devices  to cars, Chinese people now have more shopping choices thanks to global trade. But this wouldn’t be possible without one organization – the World Trade Organization (WTO).
    </div>
</body>

效果预览图