[英]Increase width of a td so that the contents is on a single line
I have a table that looks something like this: 我有一个看起来像这样的表:
+----------------------+-------------------+
| This text is on the | This text is on |
| first column | the second column |
+----------------------+-------------------+
And I want it to look like this: 我希望它看起来像这样:
+----------------------------------+-----------------------------------+
| This text is on the first column | This text is on the second column |
+----------------------------------+-----------------------------------+
My table is longer than the screen and has many many lines, but this is the functionality I want from it. 我的表比屏幕长,并且有很多行,但这是我想要的功能。 Is there a CSS property that can make this happen without truncating the text?
是否有CSS属性可以在不截断文本的情况下实现? If not could somebody point me to a javascript example on how to do this?
如果没有,有人可以指向我如何做到这一点的JavaScript示例?
试试white-space
:
td { white-space: nowrap; }
If you need wider browser support than white-space: nowrap
you can use a pre tag. 如果您需要比
white-space: nowrap
更广泛的浏览器支持white-space: nowrap
您可以使用预标签。 The css solution is nicer though so only use pre
if you really have to: css解决方案更好,但如果你真的必须使用
pre
:
<tr>
<td><pre>This is my non wrapping text</pre></td>
<td><pre>Some more non wrapping text</pre></td>
</tr>
Obviously this will only work for simple html in your table cells, plus pre
generally comes with it's own default styling which you can get around with the following in CSS: 显然,这只适用于表格单元格中的简单html,加上
pre
通常带有它自己的默认样式,你可以在CSS中使用以下内容:
td pre {
font-family: inherit;
font-size: inherit;
/* ... and so on */
}
Using inherit
can be slightly less supported, so if you can it is best to actually define the style you want directly. 使用
inherit
可能会稍微少一点,所以如果可以的话,最好直接定义你想要的样式。
Try: 尝试:
<table>
<tr>
<td nowrap>Look ma</td>
</tr>
</table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.