> For the complete documentation index, see [llms.txt](https://me.hopenote.vip/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://me.hopenote.vip/css/css-bei-wang/css-chang-yong-dai-ma-pian-duan.md).

# CSS 常用代码片段

### 单行文本溢出显示省略号 <a href="#dan-hang-wen-ben-yi-chu-xian-shi-sheng-lve-hao" id="dan-hang-wen-ben-yi-chu-xian-shi-sheng-lve-hao"></a>

```css
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
```

### 多行文本溢出显示省略号

```css
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
```

### 垂直居中

```css
position: relative;
top: 50%;
transform: translateY(-50%);
```

### Retina 屏幕1px border

```css
.retina-border-onepx {
    border-radius: 20px;
    position: relative;
}
.retina-border-onepx:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border-radius: 40px;
    border: 1px solid #fff;
    transform: scale(0.5);
    transform-origin: left top;
}
```

{% hint style="info" %}
伪类元素 `width、 height 、border-radius 必须是父元素的二倍`
{% endhint %}