CSS常用技巧

💬 文字溢出显示省略号

<div class="text">
  古罗马帝国有一个非常有趣的习俗叫做“罗马凯旋仪式”（Roman Triumph）。
  当罗马将军在战斗中取得重大胜利并且得到元老院的批准后，
  他们会在罗马城内举行盛大的凯旋仪式。
</div>

<style>
.container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap; 
  text-overflow: ellipsis; 
}
</style>

TIP

如果想要超出多行显示省略号，可以使用 -webkit-line-clamp 属性，但是需要注意的是这个属性只有在 -webkit-box-orient: vertical 和 display: -webkit-box 一起使用时才会生效。

.container {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* 最多显示两行 */
  -webkit-line-clamp: 2;
  overflow: hidden;
}

📌 绝对定位元素居中

方案一

<div class="container">
  <div class="child">你好呀👋</div>
</div>

<style>
.container {
  position: relative;
  width: 100%;
  height: 600px;
  background-color: #f0f0f0;
}
.child {
  position: absolute;
  /* 偏移50%然后减去元素的一半宽/高度 */
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

方案二

<div class="container">
  <div class="child">你好呀👋</div>
</div>

<style>
.container {
  position: relative;
  width: 100%;
  height: 600px;
  background-color: #f0f0f0;
}
.child {
  position: absolute;
  /* 必须设置宽高 */
  width: fit-content;
  height: fit-content;
  /* 利用margin: auto自动计算 */
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>

TIP

这两种方案也可以实现仅水平居中或垂直居中。以水平居中为例:

方案一中的 transform: translate(-50%, -50%) 可以改为 left: 50%; transform: translateX(-50%)。

方案二可以只把 left 和 right 设置为 0。