Html 溢出隐藏设置在IE 11、Firefox中不起作用_Html_Css_Twitter Bootstrap

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

html css twitter-bootstrap

Html 溢出隐藏设置在IE 11、Firefox中不起作用,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,请看其中，我希望描述实际上隐藏溢出的内容，并仅显示分配的宽度百分比（在本例中为17%）的文本。我使用Bootstrap3.3.7版本进行CSS样式设计。我不确定是什么导致了这个问题。有人能帮我解决这个问题吗 <table class="table table-hover table-striped mytable" rules="all" id="gvTimeEntries" style="border-collapse:collapse;" cellspacing="0" bo

请看其中，我希望描述实际上隐藏溢出的内容，并仅显示分配的宽度百分比（在本例中为17%）的文本。我使用Bootstrap3.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>


项目
子项目
任务
描述
周一
星期二
结婚
清华大学
星期五
坐
太阳
全部的
梅塞纳斯精英前，封建等级发酵剂n
献祭精英。Phasellus
样品
Lorem ipsum dolor sit amet，是一位杰出的献身者。乌尔特里斯舌苔和乌尔特里斯舌苔。这是莫里斯·托托（mauris tortor）提供的设施，是比本杜姆·埃吉特（bibendum eget）的生命。最大车辆行驶时间。莫比·埃吉特·普尔文纳·萨皮恩。我爱你，我爱你，我爱你，我爱你。我是维韦拉·胡斯托，我是菲尼布斯·梅特斯。这是在奥瓦帕特的一个封建法庭。我的狮子座，我的侵权人，我的权利。纳姆·洛博蒂斯·费吉亚特·利古拉（Nam lobortis feugiat ligula）、埃吉特·伊库利斯·里苏斯·特里斯蒂克（eget iaculis risus tristique）和努克·奥奇（nunc orci）的克拉斯（Cras）。这是一个非常重要的问题。前辈们是精英，他们是新一代的发酵剂，他们是酒后驾车者。这是一个很好的例子，它是一个很好的例子。Maecenas nec molestie nisl。我是一个聪明的人。在非sed中。
7.
6.
4.
7.
7.
0
0
31

这是因为表格单元格将始终尝试将所有可能的内容放入其维度中，忽略任何宽度声明，除非您修复其布局。这很简单，只需声明

表布局：修复了相关
元素上的，即：
.mytable {
    border-collapse: collapse;
    border: 1px solid #cccccc;

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

下面是代码的一个工作示例（或参见fixed fiddle:）。为了获得更好的效果，您可能需要完整查看：

正文{
边缘顶部：100px；
背景：无重复滚动0 0#F3F4；
}
身体，
文本区，
* {
字体系列：Calibri，Helvetica，无衬线；
字体大小：14px；
}
.我的桌子{
边界塌陷：塌陷；
边框：1px实心#中交；
表布局：固定；
}
.Myth表，
.mytable td{
边框：1px实心#中交；
}
.mytable th{
文本对齐：居中！重要；
}
.溢出隐藏{
/*显示：内联网格；
显示：-ms内联网格*/
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
最小宽度：35px；
}

项目
子项目
任务
描述
周一
星期二
结婚
清华大学
星期五
坐
太阳
全部的
梅塞纳斯精英前，封建等级发酵剂n
献祭精英。Phasellus
样品
Lorem ipsum dolor sit amet，是一位杰出的献身者。乌尔特里斯舌苔和乌尔特里斯舌苔。这是莫里斯·托托（mauris tortor）提供的设施，是比本杜姆·埃吉特（bibendum eget）的生命。最大车辆行驶时间。莫比·埃吉特·普尔文纳·萨皮恩。我爱你，我爱你，我爱你，我爱你。我是维韦拉·胡斯托，我是菲尼布斯·梅特斯。这是在奥瓦帕特的一个封建法庭。我的狮子座，我的侵权人，我的权利。纳姆·洛博蒂斯·费吉亚特·利古拉（Nam lobortis feugiat ligula）、埃吉特·伊库利斯·里苏斯·特里斯蒂克（eget iaculis risus tristique）和努克·奥奇（nunc orci）的克拉斯（Cras）。这是一个非常重要的问题。前辈们是精英，他们是新一代的发酵剂，他们是酒后驾车者。这是一个很好的例子，它是一个很好的例子。Maecenas nec molestie nisl。我是一个聪明的人。在非sed中。
7.
6.
4.
7.
7.
0
0
31
这对我很有效，谢谢你的快速回答，我之前不知道表格布局，现在我将阅读有关它的内容。