CSS 小結筆記之文字溢位處理

Assist發表於2018-09-13
CSS筆記

有時文字會溢位盒子，這時一般要對文字進行溢位處理。一般有以下三種處理方法：

1、word-break:normal | break-all |keep-all 

　　normal 使用瀏覽器預設的換行

　　break-all 允許單詞內換行即允許單詞拆開顯示

　　keep-all 不允許拆開單詞顯示，連字元除外

　　這種方法只允許英文是使用，對中文無效。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 120px;
            height: 25px;
            border: 1px solid red;
            margin: 100px;
        }
        
        div:first-child {
            word-break: normal;
        }
        
        div:nth-child(2) {
            word-break: break-all;
        }
        
        div:last-child {
            word-break: keep-all;
        }
    </style>
</head>

<body>
    <div>
        my name is abcd .
    </div>
    <div>
        my name is abcd .
    </div>
    <div>
        my name is ab-cd .
    </div>
</body>

</html>
View Code

結果如下

2、white-space：normal |nowrap
　　normal正常換行
　　nowrap 強制同一行內顯示所有文字
　　允許中文
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 120px;
            height: 25px;
            border: 1px solid red;
            margin: 100px;
        }
        
        div:first-child {
            white-space: normal;
        }
        
        div:last-child {
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div>
        這是一行超級長的文字文字文字
    </div>
    <div>
        這是一行超級長的文字文字文字
    </div>

</body>

</html>
View Code

3、text-overflow:clip | ellipsis 
　　clip直接裁剪;
　　ellipsis 超出的部分用省略號代替;
　　ellipsis 使用扥前提是
　　（1）必須讓文字先強制一行顯示
　　（2）必須要和overflow搭配使用
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 120px;
            height: 25px;
            border: 1px solid red;
            margin: 100px;
        }
        
        div:first-child {
            text-overflow: clip;
        }
        
        div:last-child {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div>
        這是一行超級長的文字文字文字
    </div>
    <div>
        這是一行超級長的文字文字文字
    </div>

</body>

</html>
View Code

 

相關文章