Question

仍然无法建立适当的聊天框； /

我的要求很简单：第一列用于时间戳记，第二列用于张贴者的昵称，最后一列用于消息内容。因此：前两列应占用尽可能多的空间，以避免换行，但又不应浪费空间；而第3列应占用剩余空间，但不能再占用其他空间，如有必要，可以强制换行。

但是，两个表布局-auto和fixed-都失败了。

table-layout: auto;会在前两列中中断行，并且，如果输入单个大字作为消息内容，则尽管overflow-wrap: break-word会异常拉伸表：

.chatbox {
  display: table;
}

.message {
  display: table-row;
}

.timestamp, .author, .content {
  display: table-cell;
  padding-right: 10px;
}

.content {
  overflow-wrap: break-word;
}

<ul class="chatbox">
  <li class="message">
    <span class="timestamp">9.07.2019, 17:22:50</span>
    <span class="author">Some Longer Nick</span>
    <span class="content">I can see linebreaks in the preceeding two columns and I'd like to avoid them.</span>
  </li>
  <li class="message">
    <span class="timestamp">9.07.2019, 17:27:41</span>
    <span class="author">Nick</span>
    <span class="content">AnAbsurdlyLongWordThatCompletelyAndUtterlyDisruptsTheLayoutOfMyChatbox</span>
  </li>
</ul>

table-layout: fixed;不允许我将前两列设置为取决于其内容的宽度：

body {
  width: 500px;
}

.chatbox {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.message {
  display: table-row;
}

.timestamp, .author, .content {
  display: table-cell;
  padding-right: 10px;
}

.content {
  overflow-wrap: break-word;
}

<ul class="chatbox">
  <li class="message">
    <span class="timestamp">9.07.2019, 17:22:50</span>
    <span class="author">Nick1</span>
    <span class="content">Too much blank space surrounding the timestamp and authors' nicks do not leave enough space for message contents</span>
  </li>
  <li class="message">
    <span class="timestamp">9.07.2019, 17:27:41</span>
    <span class="author">Nick2</span>
    <span class="content">To some extend I could remedy this by explicitely setting column widths, however, this would obviously not adapt to varying lengths of nicks. Only short nicks talking would again waste space while longer nicks could break</span>
  </li>
</ul>

是否可以使用display: table做我想做的事？

Answer 1

考虑white-space: nowrap;与您的第一个解决方案

.chatbox {
  display: table;
}

.message {
  display: table-row;
}

.timestamp, .author, .content {
  display: table-cell;
  padding-right: 10px;
}

.timestamp, .author {
    white-space: nowrap;
}
.content {
  overflow-wrap: break-word;
  word-break:break-word;
}

<ul class="chatbox">
  <li class="message">
    <span class="timestamp">9.07.2019, 17:22:50</span>
    <span class="author">Some Longer Nick</span>
    <span class="content">I can see linebreaks in the preceeding two columns and I'd like to avoid them.</span>
  </li>
  <li class="message">
    <span class="timestamp">9.07.2019, 17:27:41</span>
    <span class="author">Nick</span>
    <span class="content">AnAbsurdlyLongWordThatCompletelyAndUtterlyDisruptsTheLayoutOfMyChatbox</span>
  </li>
</ul>

是否可以使表的前两列与它们的内容一样宽，而第三列占据剩余空间呢？

1 个答案: