溢出的文字省略号显示，文字围绕浮动，行内块元素妙用

最新推荐文章于 2024-01-23 10:12:28 发布

橘子阿飞

最新推荐文章于 2024-01-23 10:12:28 发布

阅读量274

点赞数 2

分类专栏：前端基础前端开发文章标签： html5 css 前端

本文链接：https://blog.csdn.net/qq_62242375/article/details/128649725

版权

前端基础同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

前端开发

8 篇文章 0 订阅

订阅专栏

一、溢出的文字省略号显示

1、单行文本溢出显示省略号——必须满足三个条件

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

代码：

    <style>
        div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* 这个单词的意思是如果文字显示不开自动换行 */
            /* white-space: normal; */
            /* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
            white-space: nowrap;
            /* 2.溢出的部分隐藏起来 */
            overflow: hidden;
            /* 3. 文字溢出的时候用省略号来显示 */
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>
        啥也不说，此处省略一万字
    </div>
</body>

运行结果：

2.多行文本溢出显示省略号

代码：

   <style>
        div {
            width: 150px;
            height: 65px;
            background-color: pink;
            margin: 100px auto;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 3;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>

<body>
    <div>
        啥也不说，此处省略一万字,啥也不说，此处省略一万字此处省略一万字
    </div>
</body>

-webkit-line-clamp:3;表示第三行显示省略号

  overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 3;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;

运行结果：

二、margin 负值巧妙利用

解决并排盒子之间的边框宽度加倍问题。
原理：让每个盒子压住前面的盒子，边框叠加。
鼠标移动边框颜色变化效果。

代码：

/*如果盒子没有定位，则鼠标经过添加相对定位即可*/
ul li:hover {
  position: relative;
  border: 1px solid orange;
}
/*若li都有定位，则使用 z-index 提高层级*/
ul li {
  z-index: 1;
  border: 1px solid orange;
}