Question

我试图用3列和固定宽度制作css表，比如200px。第一和第二列＆＃39;宽度应根据文字的长度自动调整，但文字的长度会稍有不同，比如说，它会是1-4个字母而不是更多，假设我们事先知道（并且＆＃39 ;为什么table-layout: auto;）。但是对于 3rd 列，文本长度事先不知道，它可能会很长，如果是这样，那么它应该显示单个文本行，优雅地截断＆＃34; ...＆＃34;最后，就像设置text-overflow: ellipsis时一样。

我需要这样的东西：

col1 | col2 | col3
----------------------------------------
t    | text | te xt text
text | t    | text
tex  | txt  | long text, long text te...

以下是我迄今为止所做的代码（或参见CodePen：https://codepen.io/polar11beer/pen/POaadj）：

＆＃13;

.fixed-width {
  width: 200px;
}
.table {
  display: table;
  table-layout: auto;
  width: 100%;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  width: 1%;
  border: 1px solid grey;
  padding: 5px;
}

.table-cell__long-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

＆＃13;

<div class="fixed-width">
  <div class="table">
    <div class="table-row">
      <div class="table-cell">
        text1
      </div>
      <div class="table-cell">
        text2 text2
      </div>
      <div class="table-cell table-cell__long-text">
        text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3
      </div>
    </div>  
  </div>
</div>

＆＃13;

目前，第3列扩展到所有文本长度，忽略表格宽度。我试图为它设置max-width: 50%;，但没有运气。我想避免使用普通的javascript，因为它是React应用程序。

我设法实现的目的是将第3列长文本包装到具有固定高度的span中，如下所示（CodePen https://codepen.io/polar11beer/pen/gXKjoK）：

＆＃13;

.fixed-width {
  width: 200px;
}
.table {
  display: table;
  table-layout: auto;
  width: 100%;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  width: 1%;
  border: 1px solid grey;
  padding: 5px;
}

.table-cell__long-text {
  /* overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; */
}

.long-text-wrapper {
  display: block;
  height: 1em;
  overflow: hidden;
}

＆＃13;

<div class="fixed-width">
  <div class="table">
    <div class="table-row">
      <div class="table-cell">
        text1
      </div>
      <div class="table-cell">
        text2 text2
      </div>
      <div class="table-cell table-cell__long-text">
        <span class="long-text-wrapper">
          text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3
        </span>
      </div>
    </div>  
  </div>
</div>

＆＃13;

但这样做，它缺乏＆＃34; ...＆＃34;最后，虽然我更喜欢拥有它。

Answer 1

据我所知，在表格单元格中用省略号将文本换行时遇到的问题，想提一下：

text-overflow: ellipsis仅适用于display:block，不适用于display属性的任何其他属性。因此，将display: block分配给应包含省略号截断文本的单元格。另外，由于width是处理文本溢出条件的必须属性，因此已给出。

让我知道问题陈述是否使我无法理解。

.fixed-width {
  width: 200px;
}
.table {
  display: table;
  table-layout: auto;
  width: 100%;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  width: 1%;
  border: 1px solid grey;
  padding: 5px;
  height: 40px;
}

.table-cell__long-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  width: 50%;
}

<div class="fixed-width">
  <div class="table">
    <div class="table-row">
      <div class="table-cell">
        text1
      </div>
      <div class="table-cell">
        text2 text2
      </div>
      <div class="table-cell table-cell__long-text">
        text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3
      </div>
    </div>  
  </div>
</div>

为表格单元

1 个答案: