Question

我在td内填充了大量文字。如果文本内容占用足够的空间，我试图用td包装文本，但文本不断突破表格。

td.noBorder {
    border: none;
}
.alignTable {
    border-collapse: collapse;
    background: #f4f4f4;
    padding-left: 10px;
    text-align: center;
    font: normal 13px Calibri;
    color: #5a5a5a;
}
table tr td {
    height: 30px;
    border: solid 1px #cbd0d2;
}

<div style="margin:0 auto;">
  <div style="width:730px; margin:0 auto;">
    <h1 style="height:20px;font:normal 18px Calibri;color:#010101;font-weight:600;border-collapse: collapse; margin-left:20px"> Related Links </h1>
    <div style="width:730px; margin:0 auto;">
      <h2 style="padding-left:23px;"> Header </h2>
      <table border="1" width="100%" cellpadding="0" cellspacing="0" class="alignTable" >
        <tr>
          <td class="noBorder" style="text-align: left;padding-left: 23px;"><!-- #06999c --> 
            <img src="images/arrow.png" width="5" height="10" alt="" /> <a style="padding-left: 8px;" href="{$hyperlink}" target="_blank"> LARGE TEXT </a></td>
          <td class="noBorder"/>
          <td class="noBorder"/>
        </tr>
      </table>
      </xsl:for-each>
    </div>
  </div>
</div>

Answer 1

解决方案1：让它可滚动

如果内容超出常规尺寸，您可以通过将td属性设置为overflow，使auto自动滚动。如果您希望td通常会超出其边界，您也可以传递overflow: scroll，以便始终使用滚动条进行渲染。如果您决定走这条路，请查看MDN article。

解决方案2：Flexbox

在td内，您可以添加div并为其display: flex。执行此操作将允许您仅将样式应用于div而不会超出表格范围。这违反了CSS的级联原则，但如果您需要的话，这应该是一种方便的解决方法。

如果您不熟悉flexbox样式，Chris Coyier可以很好地解释它们。 nearly all现代浏览器支持Flexbox，如果您应用vendor prefixes，则可以诱导其与IE9和10一起使用。

建议：重构您的标记

让您意识到，使用基于表格的布局不再是构建大多数网站的推荐方法。如果可以将其重构为div，那么这样做可以使您的样式表保持整洁和易于管理。

Answer 2

您有几种可能性，一种是在文本超出边距时添加垂直滚动，一种是调整字体大小以适应文本内部，您应该看到最适合您页面的内容。如果你在这里创建一个片段，我可以帮助你更精确！

td＆＃39; s中表格中的大文字

2 个答案: