css单行文本溢出的文字用省略号表示

系统管理员 2022-10-25 14:15 260阅读 0赞

未添加样式前：  
代码：

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]  
如上图，当盒子宽度不够时，文字会自动换行。  
那如何让文字用省略号表示呢？  
步骤一：让文字强制在一行显示。代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
        
                width: 100px;
                height: 100px;
                background-color: yellow;
                margin: 100px auto;
                /* 限制一行内显示文本 */
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <div>
            为中华之崛起而读书！！！
        </div>
    </body>
    </html>

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]  
步骤二：让溢出的部分隐藏，代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
        
                width: 100px;
                height: 100px;
                background-color: yellow;
                margin: 100px auto;
                /* 限制一行内显示文本 */
                white-space: nowrap;
                /* 隐藏溢出的部分文字 */
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div>
            为中华之崛起而读书！！！
        </div>
    </body>
    </html>

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]  
步骤三：用是省略号代替溢出的部分，代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
        
                width: 100px;
                height: 100px;
                background-color: yellow;
                margin: 100px auto;
                /* 限制一行内显示文本 */
                white-space: nowrap;
                /* 隐藏溢出的部分文字 */
                overflow: hidden;
                /* 溢出部分用省略号表示 */
                text-overflow: ellipsis;
            }
        </style>
    </head>
    <body>
        <div>
            为中华之崛起而读书！！！
        </div>
    </body>
    </html>

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]  
总结：  
为了让单行文本溢出的部分用省略号表示，只需添加如下三行代码：  
1.white-space:nowrap;  
2.overflow:hidden;  
3.text-overflow:ellipsis;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]: /images/20221024/4d3943263d0440deae3b2f8682a6e7da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]: /images/20221024/2f039873821349029f7c56a5f3f3dbbc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]: /images/20221024/ca5371d7a8a84fa7b301d421871ec1e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]: /images/20221024/7f039879f5894bfe9423f127ec186a67.png