当前位置:  开发笔记 > 编程语言 > 正文

如何防止表格单元格中的文本换行

如何解决《如何防止表格单元格中的文本换行》经验,为你挑选了4个好方法。

有谁知道如何防止表格单元格中的文本被包装?这是一个表的标题,标题比它下面的数据长很多,但我需要它只显示一行.如果色谱柱很宽,也没关系.

我(简化)表的HTML如下所示:

Really long column heading
Really long column heading
Really long column heading
Really long column heading
Really long column heading
Really long column heading
Really long column heading
data
data
data
data
data
data
data

标题本身包含在th标记内的div中,原因与页面上的javascript有关.

桌子出来的标题包裹在多条线上.这似乎只发生在表足够宽时,因为浏览器试图避免水平滚动.但就我而言,我想要水平滚动.

有任何想法吗?



1> Owen..:

看看这个white-space属性,使用如下:

th {
    white-space: nowrap;
}

这将强制显示在一行上的内容.

从链接页面,以下是各种选项white-space:

normal
此值指示用户代理折叠空白序列,并根据需要断行以填充行框.

pre
此值可防止用户代理折叠空白序列.仅在保留的换行符处断行.

nowrap
此值会折叠白色空间,与"normal"相同,但会抑制文本中的换行符.

pre-wrap
此值可防止用户代理折叠空白序列.在保留的换行符处打破行,并根据需要填充行框.

pre-line
此值指示用户代理折叠空白序列.在保留的换行符处打破行,并根据需要填充行框.


`table`元素必须有`table-layout:fixed;`才能使它工作.
不适用于同一单元格中的输入字段和按钮.随机放在下面.

2> Grant Wagner..:

要么


要么




请注意,`nowrap`已被弃用.https://www.w3.org/TR/html401/struct/tables.html#h-11.2.6.请改用样式表.

3> Sergey Golov..:

至少有两种方法可以做到:

在"td"标记内使用nowrap属性:

Really long column heading

在你的单词之间使用不可破坏的空格:

Really long column heading


请注意,`nowrap`已被弃用.https://www.w3.org/TR/html401/struct/tables.html#h-11.2.6.请改用样式表.

4> cssyphus..:

我遇到这个问题,需要防止在连字符处换行。

这是我的方法:

Table Text

参考:

如何在所有浏览器上防止连字符出现换行

推荐阅读
吻过彩虹的脸_378
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有