css - 如何摆脱 Chrome 和 Safari 中的水平滚动条？

Question

如何去掉这段代码中的水平滚动条:codepen ？我在 Safari 和 Chrome 中看到它，但在 Firefox 中看不到。

我正在使用 bootstrap，我得到了大致如下的标记:

<div class="container">
  <div class="row">
    <div class="messages span6 offset1">
      <table class="table">
        <tbody>
          <tr>
            <td class=timestamp>[2:22 PM]</td>
            <td>echo|</td>
            <td>zot: Got a paste or gist of the code?</td>
          </tr>
          <!-- many more rows… -->
        </tbody>
      </table>
    </div>
  </div>
</div>

和样式:

.messages {
  height: 200px;
  overflow: auto;
}
.messages .timestamp {
  min-width: 75px;
}

问题似乎是 min-width 约束，但我需要它来防止第一列换行。我还需要将消息的高度限制为 200 像素。我无法在 .messages 上设置 overflow-x: hidden，因为它会切断内容。

Answer 1

这个怎么样:-

在最后一列使用 word-break 以避免它被截断。

word-break

Demo

.messages {
    height: 200px;
    overflow-y: auto;
    
}
.messages .timestamp {
    min-width: 75px;
}
.messages td:nth-child(3) {
    word-break:break-all; /* or use word-break:normal; if you don't want to get the word cut in between*/
   
}

这将根据可用宽度调整分词，而不隐藏内容。