0

我如何摆脱此代码上的水平滚动条：codepen？我在 Safari 和 Chrome 中看到它，但在 Firefox 中没有。

我正在使用引导程序，并且大致有以下标记：

<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 像素。我无法启动overflow-x: hidden，.messages因为它会切断内容。

4

5 回答 5

3

这个怎么样：-

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

断字

演示

.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*/
   
}

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

于 2013-05-11T16:58:35.660 回答
2

使用以下 CSS：

.messages {
  height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.messages .timestamp {
  min-width: 75px;
}
于 2013-05-11T16:49:15.807 回答
0

您可以将 .messages 的高度属性更改为“自动”而不是 200 像素。

于 2013-05-11T16:49:32.723 回答
0

您可以通过将其 span6 更改为 span7 来增加表格的宽度，或者使用 span 类强制消息 tds 上的宽度与 Twitter 引导网格结构上下文一致。

我不能确切地告诉你为什么这是必要的。实际上，我不太了解表格是如何布置的。但这似乎是您可以部署的解决方案。

于 2013-05-11T17:25:53.617 回答
0

一个完全不同的想法：你为什么要使用表格来做到这一点？您没有布置表格数据；你有一些语义相关的部分，但它们的关系不是表格的。鉴于此，您违反了一项基本规则：不要使用表格进行布局！在我看来，您可能可以使用元素更明智地完成这项工作div，在元素上使用其中一个float或inline-block指定宽度。在这种情况下，您的标记将如下所示：

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

然后，您的 CSS 将相当简单，因为您已经定义了 的width值span6（我查看了 CodePen 上的实际 CSS）：

.message {
    display: block;
    clear: both;
}

.timestamp, .author, .messageContent {
    display: inline-block;
    vertical-align: top;
}

.timestamp, .author {
    width: 75px;
}

.messageContent {
    400px; /* You'd obviously need to tweak this down to account for any padding */
}

你不应该有讨厌的溢出问题，并且 div 应该以完全正常的方式填充它们的高度。您也可以绑定它们。并且不再存在溢出问题。

（也许你在哪里，因为它是引导程序默认的东西，在这种情况下：UGH。打破它，或者做任何必要的事情来避免使用表格进行布局。它总是会比它的价值更痛苦，并且启动是没有语义的。）

于 2013-05-11T18:13:31.890 回答