0

我有一个 div 表使用display: column; width: 100px;

单元格正在使用display: table-cell; white-space: nowrap; overflow: hidden;，因为我总是希望数据在同一行，如果它太长应该被切断。

这是一个jsfiddle。

        <div class="table">
        <div class="column1" style="display:table-column;width:50px;overflow:hidden;"></div>
        <div class="column2" style="display:table-column;width:50px;overflow:hidden;"></div>
        <div class="column3" style="display:table-column;width:200px;overflow:hidden;"></div>
        <div class="column4" style="display:table-column;width:50px;overflow:hidden;"></div>
        <div class="row">
            <div class="cell"><span>a sdf</span></div>
            <div class="cell"><span>as dlfk jas dofj </span></div>
            <div class="cell"><span>as klödfjasdfj asöldfjk as</span></div>
            <div class="cell"><span>a sdf</span></div>
        </div>
        <div class="row">
            <div class="cell"><span>a sdf</span></div>
            <div class="cell"><span>as dlfk jas dofj </span></div>
            <div class="cell"><span>as klödfjasdfj asöldfjk </span></div>
            <div class="cell"><span>a sdf</span></div>
        </div>
        <div class="row">
            <div class="cell"><span>a sdf</span></div>
            <div class="cell"><span>as dlfk jas dofj </span></div>
            <div class="cell"><span>kludd as klödfjasdfj asöldfjkaskj fhalksfh alskdfhak dfhaslkfhasldfh asklh aslkdfh asklfh</span></div><!-- Add this to the cell: style="max-width:0px;"-->
            <div class="cell"><span>a sdf</span></div>
        </div>
        <div class="row">
            <div class="cell"><span>a sdf</span></div>
            <div class="cell"><span>as dlfk jas dofj </span></div>
            <div class="cell"><span>as klödfjasdfj asöldfjk </span></div>
            <div class="cell"><span>a sdf</span></div>
        </div>
    <div>

.table{
    display:table;
    table-layout:fixed;
    border:1px solid;
}

.row{
    display:table-row;
}

.cell{
    display:table-cell;
    border-right:1px solid;
    white-space:nowrap;
    overflow:hidden;
}

.cell:last-of-type{
    border:0;
}

.cell span{
    text-overflow:ellipsis;
}

在数据长于 200 像素之前，该表的行为应如此。我可以通过设置max-width: 200px;单元格来解决这个问题。但是，宽度是来自服务器的动态值，我不想为样式属性中的每个单元格呈现这些不必要的数据。

是否有可能以解决此问题的方式编写我的专栏？

还有一件奇怪的事情，如果我max-width: 0px;在单元格上设置了一个样式属性，它的数据很长，它会呈现为 200px！有人可以解释一下吗？

4

2 回答 2

0

我想这是你的要求，如果我错了，请告诉我。

将 [max-width] 设置为您想要的任何值，然后设置 [overflow:scroll]

//CSS块

.cell {
    display:table-cell;
    border-right:1px solid;
    white-space:nowrap;
    overflow:scroll;
    border: 1px solid;
    max-width: 200px;
}
于 2014-12-22T16:56:18.713 回答
0

您是否尝试过在源代码级别剪辑字符串。如果这是来自数据库的 SQL 查询（等），为什么不要求更少呢？

您还可以使用 javascript .substring() 函数来剪辑文本。

<div id="text_display"></div>
<script>
var content = "Hello world!";
document.getElementById("text_display").innerHTML = content.substring(0, 6);;
</script>

如果您想在表格本身中进行裁剪，请尝试使用div而不是span。将我使用的样式应用于 span 标签没有剪辑。看起来像表格组件的任何东西都遵守其限制。我还没有找到如何很好地剪辑表格单元格。然后将内容包装在 div 标签中可以得到您想要的剪辑。但是，此时，如果您真的要显示表格数据，您可能希望在需要裁剪的单元格上的每个td内使用div标签走表格的路线。

HTML：

    <div class="table">
        <div class="column1" style="display:table-column;width:50px;overflow:hidden;"></div>
        <div class="column2" style="display:table-column;width:50px;overflow:hidden;"></div>
        <div class="column3" style="display:table-column;width:200px;overflow:hidden;"></div>
        <div class="column4" style="display:table-column;width:50px;overflow:hidden;"></div>
    <div class="table">
        <div class="row">
            <div class="cell"><div>a sdf</div></div>
            <div class="cell"><div>as dlfk jas dofj </div></div>
            <div class="cell"><div>as klödfjasdfj asöldfjk as</div></div>
            <div class="cell"><div>a sdf</div></div>
        </div>
        <div class="row">
            <div class="cell"><div>a sdf</div></div>
            <div class="cell"><div>as dlfk jas dofj </div></div>
            <div class="cell"><div>as klödfjasdfj asöldfjk </div></div>
            <div class="cell"><div>a sdf</div></div>
        </div>
        <div class="row">
            <div class="cell"><div>a sdf</div></div>
            <div class="cell"><div>as dlfk jas dofj </div></div>
            <div class="cell"><div>kludd as klödfjasdfj asöldfjkaskj fhalksfh alskdfhak dfhaslkfhasldfh asklh aslkdfh asklfh</div></div>
            <div class="cell"><div>a sdf</div></div>
        </div>
        <div class="row">
            <div class="cell"><div>a sdf</div></div>
            <div class="cell"><div>as dlfk jas dofj </div></div>
            <div class="cell"><div>as klödfjasdfj asöldfjk </div></div>
            <div class="cell"><div>a sdf</div></div>
        </div>
    <div>
    <div>

CSS：

.table{
    display:table;
    table-layout:fixed;
    border:1px solid;
}

.row{
    display:table-row;
}

.cell{
    display:table-cell;
    border-right:1px solid;
}
.cell:last-of-type{
    border:0;
}

.cell div {
    white-space:nowrap;
    overflow:hidden;
    width:50px;
    background:lightblue;
}
.row div:nth-child(3) div {
    background:white;
    width:200px;
}
于 2015-08-29T22:17:21.690 回答