网格布局列延伸太远

时间:2020-10-26 05:51:37

标签: css css-grid

我正在尝试使用网格布局创建两列。右列的宽度是固定的,但左列应该取剩下的。但是,问题在于,当内容太长时,它将扩展左列并在容器中导致水平滚动条。

screenshot of error

现在我可以使用其他方法来实现此目的,例如calc,但我正在尝试学习网格布局。

这里有个小提琴来演示:https://jsfiddle.net/pta2c7um/

理想情况下,我希望长标题在尊重网格结构的情况下被截断。

1 个答案:

答案 0 :(得分:1)

解决方案:

#ticket-viewer .list li{
    /* grid-template-columns: auto 80px; */
    grid-template-columns: minmax(0, 1fr) 80px;
    padding: 1rem;
    cursor: pointer;
}

工作示例:

.list{
  margin: 0;
  padding: 0;
}
.list li {
  padding: 0.8rem 0;
  position: relative;
}
.list li small {
  color: #777777;
}
.list li .content {
  padding: 0 !important;
}
.list li .right-assist {
  text-align: right;
}
.list.left-assist li, .list.right-assist li {
  display: grid;
}
.list.right-assist li {
  grid-template-columns: auto 40px;
}
.list.dividers li:before {
  content: "";
  position: absolute;
  height: 1px;
  background: #CCC;
  bottom: 0px;
  left: 0;
  right: 0;
}
#ticket-viewer{
    border: 1px solid #CCC;
    display: flex;
}
#ticket-viewer .list{
    width: 40%;
  height: 560px;
  overflow-y: auto;
  border-right: 1px solid #CCC;
}
#ticket-viewer .list li{
    /* grid-template-columns: auto 80px; */
  grid-template-columns: minmax(0, 1fr) 80px;
    padding: 1rem;
    cursor: pointer;
}
.truncate {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div id="ticket-viewer">
  <ul class="list right-assist dividers">
    <li data-id="1" class="">
      <div class="content"><span class="truncate">Test</span><small>Bug/Error on Website</small></div>
      <div class="right-assist">Resolved</div>
    </li>
    <li data-id="2" class="active">
      <div class="content"><span class="truncate">This is a very very long subject</span><small>Feature Request</small></div>
      <div class="right-assist">Resolved</div>
    </li>
  </ul>
</div>

说明:

grid-template-columns: minmax(0, 1fr) 80px;分步说明:

  1. 定义两列。
  2. 最后一个具有固定的80px宽度;
  3. 第一个占用剩余空间。

minmax(0,..)用于告诉浏览器缩小列的宽度,如果其内容大于1fr(即剩余空间的一小部分)。

More info on MDN

相关问题