html - 溢出隐藏设置在 IE 11、Firefox 中不起作用

Question

请参阅 JS Fiddle 我期望其中的描述实际上隐藏了溢出的内容并仅显示分配的宽度百分比的文本。(在本例中为 17%)。我正在使用 Bootstrap 3.3.7 版本进行 CSS 样式设置。我不确定是什么导致了这个问题。
谁能帮我解决这个问题？

<table class="table table-hover table-striped mytable" rules="all" id="gvTimeEntries" style="border-collapse:collapse;" cellspacing="0" border="1">
    <thead>
        <tr style="color:White;background-color:#00A4E4;font-weight:bold;">
            <th class="overflowHidden" scope="col" style="width:17%;">Project</th>
            <th class="overflowHidden" scope="col" style="width:17%;">Sub-Project</th>
            <th class="overflowHidden" scope="col" style="width:17%;">Task</th>
            <th class="overflowHidden" scope="col" style="width:17%;">Description</th>
            <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Mon</th>
            <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Tue</th>
            <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Wed</th>
            <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Thu</th>
            <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Fri</th>
            <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Sat</th>
            <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Sun</th>
            <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="overflowHidden" style="width:17%;">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                    <span id="lblProject" title="Rater Onboarding &amp; Support" style="display:inline-block;width:100%;">Maecenas elit ex, feugiat vel fermentum n</span>
                </div>
            </td>
            <td class="overflowHidden" style="width:17%;">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                    <span id="lblSubProject" title="Rater Onboarding and Version Release " style="display:inline-block;width:100%;">consectetur adipiscing elit. Phasellus  </span>
                </div>
            </td>
            <td class="overflowHidden" style="width:17%;">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                    <span id="lblTask" title="Design &amp; Development" style="display:inline-block;width:100%;">Sample</span>
                </div>
            </td>
            <td class="overflowHidden" style="width:17%;">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                    <span id="lblComment" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices ligula ut posuere ultrices. Ut facilisis mauris tortor, vitae molestie lorem bibendum eget. Etiam vehicula maximus dui et auctor. Morbi eget pulvinar sapien. Vivamus mi lorem, congue id porta in, interdum vitae lectus. Fusce id viverra justo, quis finibus metus. Ut feugiat consequat metus at volutpat. Phasellus mi leo, vulputate id tortor eu, accumsan eleifend lectus. Nam lobortis feugiat ligula, eget iaculis risus tristique et. Cras at nunc orci. Sed volutpat magna vel nunc dignissim sodales. Maecenas elit ex, feugiat vel fermentum nec, sollicitudin sit amet dui. Etiam dapibus, lacus non facilisis ullamcorper, quam arcu tempus risus, nec porta orci purus vel lectus. Maecenas nec molestie nisl. Sed id velit ac sapien finibus blandit. In non sed.">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices ligula ut posuere ultrices. Ut facilisis mauris tortor, vitae molestie lorem bibendum eget. Etiam vehicula maximus dui et auctor. Morbi eget pulvinar sapien. Vivamus mi lorem, congue id porta in, interdum vitae lectus. Fusce id viverra justo, quis finibus metus. Ut feugiat consequat metus at volutpat. Phasellus mi leo, vulputate id tortor eu, accumsan eleifend lectus. Nam lobortis feugiat ligula, eget iaculis risus tristique et. Cras at nunc orci. Sed volutpat magna vel nunc dignissim sodales. Maecenas elit ex, feugiat vel fermentum nec, sollicitudin sit amet dui. Etiam dapibus, lacus non facilisis ullamcorper, quam arcu tempus risus, nec porta orci purus vel lectus. Maecenas nec molestie nisl. Sed id velit ac sapien finibus blandit. In non sed.</span>
                </div>
            </td>
            <td class="overflowHidden" style="width:4%;" align="center">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                    <span id="lblMon" class="inputMonday">7</span>
                </div>
            </td>
            <td class="overflowHidden" style="width:4%;" align="center">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                    <span id="lblTue" class="inputTuesday">6</span>
                </div>
            </td>
            <td class="overflowHidden" style="width:4%;" align="center">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                    <span id="lblWed" class="inputWednesday">4</span>
                </div>
            </td>
            <td class="overflowHidden" style="width:4%;" align="center">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                    <span id="lblThu" class="inputThursday">7</span>
                </div>
            </td>
            <td class="overflowHidden" style="width:4%;" align="center">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                    <span id="lblFri" class="inputFriday">7</span>
                </div>
            </td>
            <td class="overflowHidden" style="background-color:#DDDDDD;width:4%;" align="center">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
                    <span id="lblSat" class="inputSaturday">0</span>
                </div>
            </td>
            <td class="overflowHidden" style="background-color:#DDDDDD;width:4%;" valign="top" align="center">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
                    <span id="lblSun" class="inputSunday">0</span>
                </div>
            </td>
            <td class="overflowHidden" style="background-color:#DDDDDD;width:4%;" align="center">
                <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 100%;">
                    <span id="lblTotalHours" class="inputTotalRow">31</span>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

这是因为表格单元格将始终尝试将所有可能的内容放入其尺寸，忽略任何宽度声明，除非您修复其布局。这就像声明 table-layout: fixed 一样简单在 <table> 上有问题的元素，即:

.mytable {
    border-collapse: collapse;
    border: 1px solid #cccccc;

    /* Fix layout */
    table-layout: fixed;
}

这是您的代码的一个工作示例(或查看固定 fiddle :http://jsfiddle.net/teddyrised/x397cL72/2/)。您可能希望完整查看它以获得更好的效果:

body {
  margin-top: 100px;
  background: none repeat scroll 0 0 #f3f3f4;
}

body,
textarea,
* {
  font-family: Calibri, Helvetica, sans-serif;
  font-size: 14px;
}

.mytable {
  border-collapse: collapse;
  border: 1px solid #cccccc;
  table-layout: fixed;
}

.mytable th,
.mytable td {
  border: 1px solid #cccccc;
}

.mytable th {
  text-align: center !important;
}

.overflowHidden {
  /*display: inline-grid;
    display: -ms-inline-grid;*/
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 35px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-hover table-striped mytable" rules="all" id="gvTimeEntries" style="border-collapse:collapse;" cellspacing="0" border="1">
  <thead>
    <tr style="color:White;background-color:#00A4E4;font-weight:bold;">
      <th class="overflowHidden" scope="col" style="width:17%;">Project</th>
      <th class="overflowHidden" scope="col" style="width:17%;">Sub-Project</th>
      <th class="overflowHidden" scope="col" style="width:17%;">Task</th>
      <th class="overflowHidden" scope="col" style="width:17%;">Description</th>
      <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Mon</th>
      <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Tue</th>
      <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Wed</th>
      <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Thu</th>
      <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Fri</th>
      <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Sat</th>
      <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Sun</th>
      <th class="overflowHidden headerOverflowNormal" scope="col" style="width:4%;" valign="top" align="center">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="overflowHidden" style="width:17%;">
        <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
          <span id="lblProject" title="Rater Onboarding &amp; Support" style="display:inline-block;width:100%;">Maecenas elit ex, feugiat vel fermentum n</span>
        </div>
      </td>
      <td class="overflowHidden" style="width:17%;">
        <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
          <span id="lblSubProject" title="Rater Onboarding and Version Release " style="display:inline-block;width:100%;">consectetur adipiscing elit. Phasellus  </span>
        </div>
      </td>
      <td class="overflowHidden" style="width:17%;">
        <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
          <span id="lblTask" title="Design &amp; Development" style="display:inline-block;width:100%;">Sample</span>
        </div>
      </td>
      <td class="overflowHidden" style="width:17%;">
        <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
          <span id="lblComment" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices ligula ut posuere ultrices. Ut facilisis mauris tortor, vitae molestie lorem bibendum eget. Etiam vehicula maximus dui et auctor. Morbi eget pulvinar sapien. Vivamus mi lorem, congue id porta in, interdum vitae lectus. Fusce id viverra justo, quis finibus metus. Ut feugiat consequat metus at volutpat. Phasellus mi leo, vulputate id tortor eu, accumsan eleifend lectus. Nam lobortis feugiat ligula, eget iaculis risus tristique et. Cras at nunc orci. Sed volutpat magna vel nunc dignissim sodales. Maecenas elit ex, feugiat vel fermentum nec, sollicitudin sit amet dui. Etiam dapibus, lacus non facilisis ullamcorper, quam arcu tempus risus, nec porta orci purus vel lectus. Maecenas nec molestie nisl. Sed id velit ac sapien finibus blandit. In non sed.">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices ligula ut posuere ultrices. Ut facilisis mauris tortor, vitae molestie lorem bibendum eget. Etiam vehicula maximus dui et auctor. Morbi eget pulvinar sapien. Vivamus mi lorem, congue id porta in, interdum vitae lectus. Fusce id viverra justo, quis finibus metus. Ut feugiat consequat metus at volutpat. Phasellus mi leo, vulputate id tortor eu, accumsan eleifend lectus. Nam lobortis feugiat ligula, eget iaculis risus tristique et. Cras at nunc orci. Sed volutpat magna vel nunc dignissim sodales. Maecenas elit ex, feugiat vel fermentum nec, sollicitudin sit amet dui. Etiam dapibus, lacus non facilisis ullamcorper, quam arcu tempus risus, nec porta orci purus vel lectus. Maecenas nec molestie nisl. Sed id velit ac sapien finibus blandit. In non sed.</span>
        </div>
      </td>
      <td class="overflowHidden" style="width:4%;" align="center">
        <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
          <span id="lblMon" class="inputMonday">7</span>
        </div>
      </td>
      <td class="overflowHidden" style="width:4%;" align="center">
        <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
          <span id="lblTue" class="inputTuesday">6</span>
        </div>
      </td>
      <td class="overflowHidden" style="width:4%;" align="center">
        <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
          <span id="lblWed" class="inputWednesday">4</span>
        </div>
      </td>
      <td class="overflowHidden" style="width:4%;" align="center">
        <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
          <span id="lblThu" class="inputThursday">7</span>
        </div>
      </td>
      <td class="overflowHidden" style="width:4%;" align="center">
        <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
          <span id="lblFri" class="inputFriday">7</span>
        </div>
      </td>
      <td class="overflowHidden" style="background-color:#DDDDDD;width:4%;" align="center">
        <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
          <span id="lblSat" class="inputSaturday">0</span>
        </div>
      </td>
      <td class="overflowHidden" style="background-color:#DDDDDD;width:4%;" valign="top" align="center">
        <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
          <span id="lblSun" class="inputSunday">0</span>
        </div>
      </td>
      <td class="overflowHidden" style="background-color:#DDDDDD;width:4%;" align="center">
        <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 100%;">
          <span id="lblTotalHours" class="inputTotalRow">31</span>
        </div>
      </td>
    </tr>
  </tbody>
</table>