时间戳

首页 > 解决方案 > “网格模板列：适合内容（50%）1fr；” 没有按预期工作

css - “网格模板列：适合内容（50%）1fr；” 没有按预期工作

问题描述

我的应用程序有一个包含两个范围项（标题和描述）的元素。我希望标题宽度与描述宽度相比更大，但如果标题太大，请限制它以便描述也出现。我的解决方案（完整代码在这里）

.info {
  display: grid;
  grid-template-columns: fit-content(50%) 1fr;
  overflow: hidden;
  
  margin-bottom: 20px
}

但是这个解决方案在标题长而描述太短的情况下存在问题。 在此处输入图像描述 它在我的应用程序中的工作方式不同。（代码在这里） 在此处输入图像描述 如果没有描述，标题宽度仍然是50%。

如何实现这一点，也许有更简单的方法？

标签： css

解决方案

.container {
  max-width: 500px;
  margin: 0 auto;
}

.info {
  display: flex;
  align-items: left;
  text-align: left;
}

.title {
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 50%;
  margin: 0 5px 0 0;
}

.description {
  color: #67697c;
  overflow: hidden;
  font-size: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
<div class="container">
  <section class="info">
    <div class="title">
      short title
    </div>
    <div class="description">
      shor description
    </div>
  </section>
  <section class="info">
    <div class="title">
      short title
    </div>
    <div class="description">
      long description - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec quam nulla. In eu dui faucibus, euismod urna eu, consequat elit.
    </div>
  </section>
  <section class="info">
    <div class="title">
      long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec quam nulla. In eu dui faucibus, euismod urna eu, consequat elit.
    </div>
    <div class="description">
      short description
    </div>
  </section>
  <section class="info">
    <div class="title">
      long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec quam nulla. In eu dui faucibus, euismod urna eu, consequat elit.
    </div>
    <div class="description">
      long description - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec quam nulla. In eu dui faucibus, euismod urna eu, consequat elit.
    </div>
  </section>
  <div class="title">
    long title without description - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec quam nulla. In eu dui faucibus, euismod urna eu, consequat elit.
  </div>
  </section>
</div>

我在父 div 中添加了 flex，并为标题提供了 50% 的最大宽度。

推荐阅读