CSS 文字溢出时能居中吗

在本文中，我们将介绍如何在CSS中实现文字溢出时的居中效果。当文字内容超出容器的宽度或高度时，我们通常会使用溢出处理来隐藏多余的文字内容。然而，在某些情况下，我们可能希望将溢出的文字居中显示，而不是隐藏起来。

阅读更多：CSS 教程

文字溢出处理

在CSS中，通过设置overflow属性即可处理文字的溢出情况。以下是overflow属性的常见取值：

overflow: visible：默认值，溢出部分可见；
overflow: hidden：溢出部分隐藏；
overflow: scroll：溢出部分显示滚动条；
overflow: auto：当溢出时显示滚动条。

水平居中溢出文字

要实现水平居中溢出文字，我们可以结合使用text-align和white-space属性。通过设置text-align为center，可以将文字内容水平居中；通过设置white-space为nowrap，可以强制文字在一行内显示，不换行。

示例代码如下：

.container {
  width: 200px;
  height: 50px;
  overflow: hidden;
}

.centered-text {
  text-align: center;
  white-space: nowrap;
}

<div class="container">
  <div class="centered-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

在上述示例中，我们首先创建一个容器.container，限制其宽度为200px，高度为50px，并设置溢出隐藏。然后在容器内部创建一个具有居中样式的文本块.centered-text，通过设置text-align为center和white-space为nowrap，实现了文字内容的水平居中显示。

垂直居中溢出文字

要实现垂直居中溢出文字的效果，我们可以结合使用line-height和overflow属性。通过设置line-height等于容器的高度，即可将溢出的文字垂直居中显示。

示例代码如下：

.container {
  width: 200px;
  height: 50px;
  overflow: hidden;
}

.centered-text {
  line-height: 50px;
}

<div class="container">
  <div class="centered-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

在上述示例中，我们仍然使用.container作为容器，并设置其宽度为200px，高度为50px，并设置溢出隐藏。然后在容器内部创建一个具有居中样式的文本块.centered-text，通过设置line-height为容器的高度，实现了文字内容的垂直居中显示。

水平垂直居中溢出文字

如果我们希望文字在水平和垂直方向均居中显示，可以使用绝对定位和负边距的方法。

示例代码如下：

.container {
  position: relative;
  width: 200px;
  height: 50px;
  overflow: hidden;
}

.centered-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <div class="centered-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

在上述示例中，我们将容器.container设置为相对定位，并设置其宽度为200px，高度为50px，并设置溢出隐藏。然后在容器内部创建一个具有居中样式的文本块.centered-text，通过设置position为绝对定位，以及top: 50%、left: 50%和transform: translate(-50%, -50%)属性，实现了文字内容的水平和垂直居中显示。