CSS 小结笔记之文字溢出处理

最新推荐文章于 2024-01-02 17:04:47 发布

weixin_30845171

最新推荐文章于 2024-01-02 17:04:47 发布

阅读量57

点赞数

原文链接：http://www.cnblogs.com/Assist/p/9639774.html

版权

有时文字会溢出盒子，这时一般要对文字进行溢出处理。一般有以下三种处理方法：

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

转载于:https://www.cnblogs.com/Assist/p/9639774.html

weixin_30845171

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 小结笔记之文字溢出处理

有时文字会溢出盒子，这时一般要对文字进行溢出处理。一般有以下三种处理方法：1、word-break:normal |break-all |keep-all　　normal 使用浏览器默认的换行　　break-all 允许单词内换行即允许单词拆开显示　　keep-all 不允许拆开单词显示，连字符除外　　这种方法只允许英文是使用，对中文无效。<!DO...
复制链接

扫一扫