text-flow属性和word-break属性

1.text-overflow:clip; 修建文本

ellipsis; 用省略号来代替

string; 用给定字符串来代替

white-space:nowrap; 禁止换行，只能单行

overflow:hidden; 隐藏

该三个缺一不可！

2.word-break:normal; 浏览器默认的换行规则

break-all; 允许在单词内换行

keep-all; 只能在半角空格或连字符处换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{
            width:250px;
            height:40px;
            border:solid 1px red;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:hidden;
        }
    </style>
</head>
<body>
<p>Loremmmmmmmmmmmmmmmmmmmmmmm ipsum dolor sit amet, consectetur adipisicing elit. Ab debitis dicta dolorem ducimus enim eos eum exercitationem facere, hic, in iure minima perferendis reiciendis similique suscipit unde ut veniam voluptatibus?</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{
            width:250px;
            height:40px;
            border:solid 1px red;
            word-break:break-all;
        }
    </style>
</head>
<body>
<p>Loremmmmmmmmmmmmmmmmmmmmmmm ipsum dolor sit amet, consectetur adipisicing elit. Ab debitis dicta dolorem ducimus enim eos eum exercitationem facere, hic, in iure minima perferendis reiciendis similique suscipit unde ut veniam voluptatibus?</p>
</body>
</html>

text-flow属性和word-break属性

相关推荐