设置div中文字自适应显示一行，超出则用...代替

最新推荐文章于 2023-02-17 14:41:07 发布

原创最新推荐文章于 2023-02-17 14:41:07 发布 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

面试同时被 2 个专栏收录

16 篇文章

订阅专栏

css

7 篇文章

订阅专栏

本文介绍了如何使用CSS样式实现文字在一行内显示并超出部分用省略号替代的效果，主要涉及white-space、overflow和text-overflow属性的使用。通过示例代码展示了在不同颜色区块中应用该效果，确保了内容在不同屏幕尺寸下都能正常显示。

因为工作原因，需要设置文字自适应显示一行，超出用...代替，因此整理出来巩固记忆。

主要依赖的属性如下所示：

/* 强制文字一行内显示 */
white-space: nowrap;
/* 超出部分隐藏 */
overflow: hidden;
/* 用省略号替代超出部分 */
text-overflow: ellipsis;

完整代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将页面平均分成四部分</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 100%;
            height: 100%;
            position: absolute;
        }
        .quarter-div{
            width: 33%;
            height: 33%;
            float: left;
            /* 强制文字一行内显示 */
            white-space: nowrap;
            /* 超出部分隐藏 */
            overflow: hidden;
            /* 用省略号替代超出部分 */
            text-overflow: ellipsis;
        }
        .blue{
            background-color: #5BC0DE;
        }
        .green{
            background-color: #5CB85C;
        }
        .orange{
            background-color: #F0AD4E;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="quarter-div blue">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
        <div class="quarter-div green">我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好我很好</div>
        <div class="quarter-div orange">你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢你呢</div>
    </div>
</body>
</html>

页面显示如下：