04-文本相关
超过省略
css
.omit{
display: inline-block;
white-space: nowrap !important; /* 不换行 */
overflow: hidden !important; /* 隐藏超出的内容 */
text-overflow: ellipsis !important; /* 用省略号表示被隐藏的部分 */
max-width: 125px !important; /* 设置最大宽度以限制文本的显示长度 */
}子元素撑满父元素
需求：点击div实现跳转，那么就需要再里面有一个a标签，这个a标签的大小要和父元素完全撑满。
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent {
position: relative; /* 父元素使用相对定位 */
width: 200px; /* 设定父元素的宽度 */
height: 200px; /* 设定父元素的高度 */
background-color: lightblue; /* 可选，仅用于可视化 */
}
.child-link {
position: absolute; /* 子元素使用绝对定位 */
top: 0; /* 距离父元素顶部的位置 */
right: 0; /* 距离父元素右侧的位置 */
bottom: 0; /* 距离父元素底部的位置 */
left: 0; /* 距离父元素左侧的位置 */
display: flex; /* 使用 Flexbox 布局来居中文本 */
align-items: center; /* 垂直居中文本 */
justify-content: center; /* 水平居中文本 */
color: #fff; /* 文本颜色 */
text-decoration: none; /* 移除下划线 */
background-color: rgba(0, 0, 0, 0.5); /* 可选，仅用于可视化 */
}
</style>
</head>
<body>
<div class="parent">
<a href="https://blog.share888.top/" target="_blank" class="child-link">Link</a>
</div>
</body>
</html>