表数据调整大小 Web 查询答案

【问题标题】：Table Data Resize Web Query表数据调整大小 Web 查询
【发布时间】：2017-11-17 23:38:37
【问题描述】：

我正在构建的网站中有一个表，该表有两行，每行嵌套了三个数据元素。在大屏幕上看起来还不错，但我想在达到某个阈值时堆叠表格数据。这可以通过网络查询和一些 CSS 实现吗？

我的代码是这样的例子：

                    <table id="example">
                        <tr>
                            <td>
                                <img src="" class="FPO"><br />
                            </td>
                            <td>
                                <img src="" class="FPO"><br />

                            </td>
                            <td>
                                <img src="" class="FPO"><br />

                            </td>
                        </tr>
                        <tr>
                            <td class="text">
                                "blah blah balh<br />
                                do re mi fa so la ti<br />
                                the butler did it!"<br />
                                <span class="bold">- me</span>
                             </td>
                            <td class="text">
                                // repeat data
                            </td>
                            <td class="text">
                               // repeat data
                            </td>
                        </tr>
                    </table>

任何帮助将不胜感激，谢谢。

【问题讨论】：

标签： html css media-queries image-resizing tablelayout

【解决方案1】：

你可以试试This这是一个css椭圆属性，当屏幕尺寸小于最后一个字符时，文本将转换为点（...），无需添加jquery，直接用css完成。

#div1 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: clip; 
    border: 1px solid #000000;
}

#div2 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
}

<html>
<body>

<p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p>

<p>This div uses "text-overflow:clip":</p>
<div id="div1">This is some long text that will not fit in the box</div>

<p>This div uses "text-overflow:ellipsis":</p>
<div id="div2">This is some long text that will not fit in the box</div>

</body>
</html>

希望这对你有帮助。

【讨论】：