Question

我有一个用css display: table制作的布局。它只有两列。其中一列包含ul元素。它的li元素基本上是具有标题行和描述行的搜索结果项。我想在描述行上应用省略号以将其保留在一行中，因此如果溢出的话，它的文本不会影响整个列的宽度：

左边是长文本发生的事情;它应该是正确的。

现在，当我尝试应用省略号内容（包括white-space: nowrap）时，文本会使列的宽度变得混乱，使其符合文本宽度，并且省略号不会显示。

＆＃13;

.table { display: table; width: 100%; border: 1px solid #f00; margin-bottom: 20px }
.table-row { display: table-row }
.table-cell { display: table-cell; }
.table-cell:first-child { width: 30%; }
.table-cell ul { padding: 0; margin: 0 }
.table-cell ul li { list-style: none; }
.item { border: 1px solid #000; }
.item-desc { 
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

＆＃13;

Table 1 - The issue
<div class="table">
  <div class="table-row">
    <div class="table-cell">
      <ul>
        <li>
          <div class="item">
            <div class="item-name">Item 1</div>
            <div class="item-desc">
              Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 
              Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 
              Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="table-cell">Nothing here</div>
  </div>
</div>

Table 2 - How it should work
<div class="table">
  <div class="table-row">
    <div class="table-cell">
      <ul>
        <li>
          <div class="item">
            <div class="item-name">Item 1</div>
            <div class="item-desc">
          Item 1 Item 1 Item 1 Item...
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="table-cell">Nothing here</div>
  </div>
</div>

＆＃13;

表1是我得到的当前css;表2是应该如何的。

问题似乎是缺少对项目div的宽度的定义，这应该尊重table-cell容器。我不知道如何解决这个问题。如何改进.item-desc以使省略号有效并保持列的原始宽度？

Answer 1

table-layout: fixed使用table - 请参阅下面的演示：

＆＃13;

.table {
  display: table;
  width: 100%;
  border: 1px solid #f00;
  margin-bottom: 20px;
  table-layout: fixed; /* ADDED THIS */
}
.table-row {
  display: table-row
}
.table-cell {
  display: table-cell;
}
.table-cell:first-child {
  width: 30%;
}
.table-cell ul {
  padding: 0;
  margin: 0
}
.table-cell ul li {
  list-style: none;
}
.item {
  border: 1px solid #000;
}
.item-desc {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

＆＃13;

<div class="table">
  <div class="table-row">
    <div class="table-cell">
      <ul>
        <li>
          <div class="item">
            <div class="item-name">Item 1</div>
            <div class="item-desc">
              Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="table-cell">Nothing here</div>
  </div>
</div>

＆＃13;

无法使用display：table-cell进行省略号工作

1 个答案: