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

最新推荐文章于 2022-11-08 16:54:25 发布

谁是听故事的人

最新推荐文章于 2022-11-08 16:54:25 发布

阅读量2k

点赞数 1

分类专栏： css 面试文章标签： css html

本文链接：https://blog.csdn.net/chaopingyao/article/details/108948002

版权

面试同时被 2 个专栏收录

15 篇文章 1 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

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

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

/* 强制文字一行内显示 */
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>

页面显示如下：

调整浏览器可显示区域的大小，依然可以正常显示：

参考文献：https://www.jianshu.com/p/8b61786491fc

谁是听故事的人

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
设置div中文字自适应显示一行，超出则用...代替

因为工作原因，需要设置文字自适应显示一行，超出用...代替，因此整理出来巩固记忆。主要依赖的属性如下所示：/* 强制文字一行内显示 */white-space: nowrap;/* 超出部分隐藏 */overflow: hidden;/* 用省略号替代超出部分 */text-overflow: ellipsis;完整代码如下所示：<!DOCTYPE html><html lang="en"><head> <meta char
复制链接

扫一扫