HTML CSS：display: inline-flex和text-overflow: ellipsis不能同时工作

在本文中，我们将介绍HTML和CSS中的两个常用属性：display和text-overflow，并详细讨论它们在一起使用时的问题。

阅读更多：HTML 教程

display: inline-flex属性

display属性用于设置元素的布局类型。其中，inline-flex是display属性的一个值，它将元素的显示类型设置为内联弹性盒子。

内联弹性盒子（inline-flex）是一种特殊的布局方式，可以将元素作为弹性项进行排列，并且具有内联的特性，可以与其他文本和元素在同一行显示。

下面是一个简单的例子，展示了使用display: inline-flex属性的效果：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: inline-flex;
      }
      .item {
        background-color: #f0f0f0;
        padding: 10px;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </body>
</html>

在上面的例子中，我们使用display: inline-flex属性将容器div设置为内联弹性盒子，并在其中放置了三个具有相同样式的子项div。

text-overflow: ellipsis属性

text-overflow属性用于控制当文本溢出容器时如何进行显示。其中，ellipsis是text-overflow属性的一个值，表示使用省略号来代替溢出的文本。

通常，text-overflow: ellipsis属性与overflow: hidden和white-space: nowrap一起使用，以确保文本溢出时能够正确地显示省略号。

下面是一个简单的例子，展示了使用text-overflow: ellipsis属性的效果：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <div class="container">
      This is a long text that will be truncated with an ellipsis.
    </div>
  </body>
</html>

在上面的例子中，我们使用text-overflow: ellipsis属性将容器div的文本溢出时使用省略号来代替。

display: inline-flex和text-overflow: ellipsis的兼容性问题

然而，display: inline-flex和text-overflow: ellipsis这两个属性在一起使用时可能会出现兼容性问题。

具体来说，当一个内联弹性盒子（inline-flex）中的文本溢出容器时，普通的块级元素可以正确地显示省略号，但内联弹性盒子则不会显示省略号。

这是由于内联弹性盒子的特性所致，它会自动调整元素的大小以适应内容，并且不会发生溢出。因此，text-overflow: ellipsis属性在内联弹性盒子上不起作用。

幸运的是，我们可以使用一个小技巧来解决这个兼容性问题。我们可以在内联弹性盒子中再添加一个具有固定宽度的容器，并在此容器上应用text-overflow: ellipsis属性。

下面是一个修复兼容性问题的例子：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: inline-flex;
      }
      .item {
        background-color: #f0f0f0;
        padding: 10px;
        margin-right: 10px;
        overflow: hidden;
        white-space: nowrap;
      }
      .ellipsis {
        width: 100px;   /* 固定宽度 */
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">
        <div class="ellipsis">Item 1 Item 1 Item 1 Item 1 Item 1 Item 1</div>
      </div>
      <div class="item">
        <div class="ellipsis">Item 2 Item 2 Item 2 Item 2 Item 2 Item 2</div>
      </div>
      <div class="item">
        <div class="ellipsis">Item 3 Item 3 Item 3 Item 3 Item 3 Item 3</div>
      </div>
    </div>
  </body>
</html>