如何让非固定表单元格显示省略号
如何让非固定表单元格显示省略号
提问于 2018-08-14 06:46:44
我有一个有趣的CSS问题给你们中的一些CSS奇才。我有一个表，其中包含用户生成的内容，并且我希望将长列限制为最大宽度。表格不是固定的布局，列宽也是用户指定的，但默认情况下应该有最大宽度。
<table>
<thead>
<tr><td>Header 1</td><td>Header 2</td></tr>
</thead>
<tbody>
<tr><td>Text</td><td>1</td></tr>
<tr><td>Text</td><td>2</td></tr>
<tr><td>Long Text Here</td><td>3</td></tr>
</tbody>
</table>我将overflow: hidden、white-space: nowrap和text-overflow: ellipsis添加到标题的css类中，在上面的html中，文本“Long text Here”将该列的宽度向外推。但这使得它的列宽只能是文本长度或更长。
除了使用固定布局之外，我还能做什么来缩小单元格，并显示省略号？
谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-14 07:31:51
一个简单的选择是在列上设置一个最大宽度，这样一些非常长的条目就不会使它变得非常宽。例如，要对第一列执行以下操作：
td:first-child {
max-width: 5em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}<table>
<thead>
<tr><td>Header 1</td><td>Header 2</td></tr>
</thead>
<tbody>
<tr><td>Text</td><td>1</td></tr>
<tr><td>Text</td><td>2</td></tr>
<tr><td>Really, Ridiculously Long Text Here</td><td>3</td></tr>
</tbody>
</table>
(您可以使用:nth-child()或类来限制其他列。)
但是，此解决方案要求在CSS中设置最大宽度，这对于动态内容可能不是很有用。相反，您可以直接在HTML的style属性中设置它，使用JavaScript或模板系统可以更容易地完成此操作：
td:first-child, th:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}<table>
<thead>
<tr><th style="max-width: 5em">Header 1</th><th>Header 2</th></tr>
</thead>
<tbody>
<tr><td style="max-width: 5em">Text</td><td>1</td></tr>
<tr><td style="max-width: 5em">Text</td><td>2</td></tr>
<tr><td style="max-width: 5em">Really, Ridiculously Long Text Here</td><td>3</td></tr>
</tbody>
</table>
Stack Overflow用户
发布于 2018-08-14 07:18:50
嗨，我不确定你是不是想要这样的东西
https://jsfiddle.net/MAXXALANDER/o6x1nt93/15/
table{
width:100%;
}
td {
width:50%;
float:left;
padding:0;
margin:0;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51831546
复制相关文章
相似问题