CSS常用设置_display grid 强制一行-优快云博客

对于前端开发人员来说，最难的一步莫过于CSS（是否同感？）

在最近的项目中学习了一些CSS设置，特意来分享~

容器内容水平垂直居中

先准备个容器和内容（一个盒子）

<div id="app">
    <div class="container">
        <div class="content"></div>
    </div>
</div>

1.利用flex弹性盒子

 .container{
    display: flex;
    justify-content: center;
    align-items: center;
}

2.利用margin与定位

.container{
    position: relative;
}
.content{
    position: absolute;
    margin:auto;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

3.利用position定位实现

.container{
    position: relative;
}
.content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
}

top: 50%; 和 left: 50%;：这两行代码将 ".b" 元素的左上角移动到了其父元素（".a"）宽度和高度的 50% 处。但这通常会导致元素看起来并不完全居中，因为这是基于元素的边缘计算的。
transform: translate(-50%, -50%);：这一行是非常关键的，它通过 CSS 变换来微调元素的位置。这里的负值（-50%）意味着元素会向上和向左各自回移自身宽度和高度的 50%，从而实现了完美的水平和垂直居中。

4.flex布局+margin

.container{
    display: flex;
}
.content{
    margin:auto;
}

5.使用Grid布局

 .container{
    display: Grid;
    place-items: center;
}

文本超长溢出截断

1.强制一行溢出显示省略号

.content{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

2.强制两行甚至多行

使用 -webkit-line-clamp 属性可以轻松实现多行文本截断。

.text {
    display: -webkit-box; /* 启用弹性盒子布局 */
    -webkit-box-orient: vertical; /* 设置垂直方向 */
    -webkit-line-clamp: 3; /* 设置最大行数 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 显示省略号 */
}

通过设置固定高度和行高，结合伪元素实现多行截断。

.text {
    position: relative;
    height: 4.5em; /* 高度 = 行高 × 行数 */
    line-height: 1.5em; /* 行高 */
    overflow: hidden;
}

.text::after {
    content: '...';
    position: absolute;
    bottom: 0;
    right: 0;
    background: white; /* 背景色与父元素一致 */
    padding-left: 5px; /* 留出间距 */
}

主要使用CSS的-webkit-line-clamp属性，这主要用于WebKit渲染引擎的浏览器（如Chrome和Safari），虽然不是CSS标准的一部分，但它是一个广泛支持的WebKit特定的扩展。