文本省略号的设置~

最新推荐文章于 2022-03-27 17:33:01 发布

东北玛丽的小笔记

最新推荐文章于 2022-03-27 17:33:01 发布

阅读量291

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_44614856/article/details/87718382

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

设置或检索是否使用一个省略标记（…）标示对象内文本的溢出

clip : 　不显示省略标记（…），而是简单的裁切

ellipsis : 　当对象内文本溢出时显示省略标记（…）

注意一定要首先强制一行内显示，再次和overflow属性搭配使用

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

下面我们来举个例子：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .red{
            width: 200px;
            height: 100px;
            background-color: pink;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div class="red">红红火火恍恍惚惚红红火火恍恍惚惚红红火火恍恍惚</div>
</body>
</html>

运行结果如下：
在这里插入图片描述

东北玛丽的小笔记

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
文本省略号的设置~

设置或检索是否使用一个省略标记（…）标示对象内文本的溢出clip : 　不显示省略标记（…），而是简单的裁切ellipsis : 　当对象内文本溢出时显示省略标记（…）注意一定要首先强制一行内显示，再次和overflow属性搭配使用/*1. 先强制一行内显示文本*/ white-space: nowrap; /*2. 超出的部分隐藏*/ overflow: ...
复制链接

扫一扫

专栏目录