html - 在 中，字体大小很大

Question

当我在 TD 元素中添加 LI 时，我遇到了一个小问题。

小字体(例如 14 像素)的行为效果很好，但如果我想使用大字体(例如 60 像素)，元素符号会溢出 TD 元素并被隐藏。

相同的行为不会发生在 Div 元素上。我怎样才能在 TD 中按照与 div 相同的行为修复元素符号和文本。

请参阅下面的代码作为一个小示例。

.tg  {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}

@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;margin: auto 0px;}}

.tg .tg-0lax{
    text-align:left;
    vertical-align:top;
    overflow: hidden;
    padding-left: 0!important;
    padding-right: 0!important;
    position: relative;
    line-height: 1.42857143;
    vertical-align: top;
    width: 100px;
}

<div class="tg-wrap">
  <table class="tg">
  <thead>
    <tr>
      <th class="tg-0lax">column 1</th>
      <th class="tg-0lax">column 2</th>
      <th class="tg-0lax">column 3</th>
      <th class="tg-0lax">column 4</th>
      <th class="tg-0lax">column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tg-0lax" style="font-size: 60px">
        <ul class="ogsmHeight" style="margin-left: 4px;padding-left: 17px;">
            <li class="position-relative extraMenu ">
                    <div style="margin-left: -0.3em">
                          <a class="color-inherit text- position-relative" data-id="297" data-entity="subKpi">
                             <div class="huge-container">
                                <span class="editable text-container border-unset text-">
                                    Lorem Ipsum Dolor Sit Amet C
                              </span>
                            </div>
                          </a>
                    </div>
                </li>
        </ul>
      </td>
      <td class="tg-0lax"></td>
      <td class="tg-0lax"></td>
      <td class="tg-0lax"></td>
      <td class="tg-0lax"></td>
    </tr>
  </tbody>
</table>
  
</div>

Answer 1

所以需要把<ul class="ogsmHeight" style="margin-left: 4px;padding-left: 17px;">中添加的内联样式去掉并从 .tg .tg-0lax 中删除填充并使用默认填充。

.tg .tg-0lax {
    text-align:left;
    vertical-align:top;
    overflow: hidden;
    position: relative;
    line-height: 1.42857143;
    vertical-align: top;
    width: 100px;
}

.tg  {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}

@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;margin: auto 0px;}}

.tg .tg-0lax{
    text-align:left;
    vertical-align:top;
    line-height: 1.42857143;
    vertical-align: top;
    width: 100px;
}

<div class="tg-wrap">
  <table class="tg">
  <thead>
    <tr>
      <th class="tg-0lax">column 1</th>
      <th class="tg-0lax">column 2</th>
      <th class="tg-0lax">column 3</th>
      <th class="tg-0lax">column 4</th>
      <th class="tg-0lax">column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tg-0lax" style="font-size: 60px">
        <ul class="ogsmHeight">
            <li class="position-relative extraMenu ">
                    <div style="margin-left: -0.3em">
                          <a class="color-inherit text- position-relative" data-id="297" data-entity="subKpi">
                             <div class="huge-container">
                                <span class="editable text-container border-unset text-">
                                    Lorem Ipsum Dolor Sit Amet C
                              </span>
                            </div>
                          </a>
                    </div>
                </li>
        </ul>
      </td>
      <td class="tg-0lax"></td>
      <td class="tg-0lax"></td>
      <td class="tg-0lax"></td>
      <td class="tg-0lax"></td>
    </tr>
  </tbody>
</table>
  
</div>