[分享]css两列数据根据内容撑开

CSS 根据内容撑开两列数据 在 Web 开发中，经常需要用到两列数据的排版。这时候，我们需要在 HTML 中使用两个 div 容器分别放置这两列数据，并给每个容器定义相应的宽度。但是，如果数据内容超...

CSS 根据内容撑开两列数据
在 Web 开发中，经常需要用到两列数据的排版。这时候，我们需要在 HTML 中使用两个 div 容器分别放置这两列数据，并给每个容器定义相应的宽度。但是，如果数据内容超出了容器的宽度，就会出现数据截断的情况，导致排版不美观。那么有什么好的解决方案呢？下面我们来看看通过 CSS 根据内容撑开两列数据的方法。
首先，我们需要对两列数据所在的 div 容器分别定义以下样式：

div.left-col {
  float: left;
  width: 50%;
}
<br>
div.right-col {
  float: right;
  width: 50%;
} 

这样，两个容器都可以占据整个父容器的一半宽度。接下来，在数据过长时，我们需要让容器根据内容自动撑开。这个时候，我们需要在容器中加入以下样式：

div.left-col {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
<br>
div.right-col {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
} 

其中，overflow: hidden 表示超出容器时隐藏内容；white-space: nowrap 表示不换行；text-overflow: ellipsis 表示超出容器时显示省略号。
最后，如果我们想让容器在内容溢出时自动扩展，就需要在上述 CSS 样式中加入以下代码：

div.left-col {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}
<br>
div.right-col {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
} 

min-width: 0 表示容器最小宽度为 0，这样，当容器中的内容过长时，容器就会根据内容自动扩展。
综上，通过以上 CSS 样式，我们可以让数据在不截断的情况下自动撑开两列容器。这样做不仅可以让排版更加美观，还可以提高用户体验。