考虑下面的例子:(live demo here)
$(function() {
console.log("width = " + $("td").width());
});
td {
border: 1px solid black;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>Hello Stack Overflow</td>
</tr>
</tbody>
</table>
输出是:width = 139
,和省略号不会出现。
我缺少的是在这里吗?
显然,加入:
td {
display: block; /* or inline-block */
}
解决问题为好。
另一种可能的解决方案是设置table-layout: fixed;
为表,并设置它的width
。例如:http://jsfiddle.net/fd3Zx/5/
如果你不想设置最大宽度,以TD(如在this answer),你可以设置最大宽度以DIV:
function so_hack(){}
function so_hack(){}
http://jsfiddle.net/fd3Zx/754/ function so_hack(){}
function so_hack(){}
注意:100%是不行的,但99%的伎俩在FF。其他现代浏览器不需要傻DIV黑客。
td { border: 1px solid black; padding-left:5px; padding-right:5px; } td>div{ max-width: 99%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
同样重要的是把
table-layout:fixed;
到含有表,所以它在IE9运行良好(如果利用最大宽度)为好。
正如前面所说的,你可以使用td { display: block; }
但这违背了使用一个表的目的。
您可以使用table { table-layout: fixed; }
但也许你希望它不同的表现某些列。
所以最好的方式来实现你想要将你包裹中的文本<div>
和你的CSS应用到<div>
(不给<td>
)这样的内容:
td {
border: 1px solid black;
}
td > div {
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
尝试使用max-width
代替width
,该表仍然会自动计算宽度。
工作,即使在ie11
(与IE8兼容模式)。
td.max-width-50 {
border: 1px solid black;
max-width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<table>
<tbody>
<tr>
<td class="max-width-50">Hello Stack Overflow</td>
</tr>
<tr>
<td>Hello Stack Overflow</td>
</tr>
<tr>
<td>Hello Stack Overflow</td>
</tr>
</tbody>
</table>
对于动态宽度表,我发现下面的方法来产生令人满意的结果。每个被希望有修整文本的能力应该有它包装的<th>
的内容让<th>
工作的内部包装元素text-overflow
。
那么,真正的关键是要设置max-width
(在<th>
)在vw
单位。
这将有效地使元素的宽度是“绑定”到视口宽度(浏览器窗口),将导致敏感内容剪辑。设置vw
单位需要一个令人满意的值。
th{ max-width:10vw; }
th > .wrap{
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
table {
font: 18px Arial;
width: 40%;
margin: 1em auto;
color: #333;
border: 1px solid rgba(153, 153, 153, 0.4);
}
table td, table th {
text-align: left;
padding: 1.2em 20px;
white-space: nowrap;
border-left: 1px solid rgba(153, 153, 153, 0.4);
}
table td:first-child, table th:first-child {
border-left: 0;
}
table th {
border-bottom: 1px solid rgba(153, 153, 153, 0.4);
font-weight: 400;
text-transform: uppercase;
max-width: 10vw;
}
table th > .wrap {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
<table>
<thead>
<tr>
<th>
<div class="wrap" title="Some long title">Some long title</div>
</th>
<th>
<div class="wrap">Short</div>
</th>
<th>
<div class="wrap">medium one</div>
</th>
<th>
<div class="wrap" title="endlessly super long title which no developer likes to see">endlessly super long title which no developer likes to see</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>very long text here</td>
</tr>
</tbody>
</table>
只是提供了一个选择,因为我有这个问题,这里没有其他的答案有我想要的理想效果。所以不是我用一个列表。现在语义我输出的信息可能已被视为两个表格的数据,而且列出的数据。
那么,到底什么,我所做的是:
<ul>
<li class="group">
<span class="title">...</span>
<span class="description">...</span>
<span class="mp3-player">...</span>
<span class="download">...</span>
<span class="shortlist">...</span>
</li>
<!-- looped <li> -->
</ul>
所以基本上ul
是table
,li
是tr
和span
是td
。
然后在CSS我设定的span
元素是display:block;
和float:left;
(我更喜欢组合inline-block
,因为它会在旧版本的IE浏览器的工作,以清除浮动的效果看:http://css-tricks.com/snippets/css/clear-fix/),并也有省略号:
span {
display: block;
float: left;
width: 100%;
// truncate when long
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
然后,所有你要做的就是设置你的跨度的max-widths
并且会给列表中的一个表的外观。
除了使用省略号来解决溢出文本的问题,我发现,残疾人和风格的输入更好看,仍然允许用户查看和选择整个字符串,如果他们需要。
<input disabled='disabled' style="border: 0; padding: 0; margin: 0" />
它看起来像一个文本字段,但亮点,能够使用户更友好
检查box-sizing
您td
元素的CSS属性。我曾与其中将其设置为border-box
值的CSS模板的问题。您需要设置box-sizing: content-box
。
留下你的表,因为它们。只是包装内的TD的内容与应用了截断CSS的跨度。
/* CSS */
.truncate {
width: 50px; /*your fixed width */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block; /* this fixes your issue */
}
<!-- HTML -->
<table>
<tbody>
<tr>
<td>
<span class="truncate">
Table data to be truncated if it's too long.
</span>
</td>
</tr>
</tbody>
</table>