博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML表中的自动换行
阅读量:2292 次
发布时间:2019-05-09

本文共 6780 字,大约阅读时间需要 22 分钟。

我一直在使用word-wrap: break-word将文本divspan 。 但是,它似乎在表单元格中不起作用。 我有一个表设置为width:100% ,有一行和两列。 列中的文本尽管使用上述word-wrap样式设置,但不会自动换行。 它导致文本超出单元格的边界。 这发生在Firefox,Google Chrome和Internet Explorer上。

来源如下所示:

td { border: 1px solid; }
Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
Short word

上面的长字比我页面的边界大,但与上面的HTML相同。 我尝试了以下添加text-wrap:suppresstext-wrap:normal ,但是都没有帮助。


#1楼

默认情况下,表格会自动换行,因此请确保表格单元格的显示为table-cell

td {   display: table-cell;}

#2楼

远射,但与 (或类似工具)仔细检查,您不会意外继承以下规则:

white-space:nowrap;

您指定的换行行为。


#3楼

事实证明,没有做到这一点的好方法。 我最接近的是添加“ overflow:hidden;”。 到表格周围的div并丢失文本。 真正的解决方案似乎是放弃沟渠。 使用div和相对定位,我可以达到相同的效果,而无需使用<table>

2015年更新:适用于像我这样想要这些答案的人。 经过6年的努力,这一切都要感谢所有贡献者。

* { // this works for all but td  word-wrap:break-word;}table { // this somehow makes it work for td  table-layout:fixed;  width:100%;}

#4楼

赢得赏金的答案是正确的,但如果的第一行具有合并/联接的单元格 (所有单元格的宽度相等),则该答案将无效。

在这种情况下,您应该使用colgroupcol标签正确显示它:

Merged cell
VeryLongWordInThisCell Cell 2

#5楼

longtextwithoutspace

要么

longtextwithoutspace

#6楼

以下内容适用于Internet Explorer。 请注意table-layout:fixed CSS属性的添加

td { border: 1px solid; }
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord


#7楼

这对我有用:

并且表的属性是:

table {      table-layout: fixed;      width: 100%   }

#8楼

style =“ table-layout:fixed; width:98%; word-wrap:break-word”

演示

这对我来说很棒。 我有很长的链接,这将导致该表在Web浏览器上超过100%。 在IE,Chrome,Android和Safari上进行了测试。


#9楼

如果不需要表格边框,请执行以下操作:

table{    table-layout:fixed;    border-collapse:collapse;}td{    word-wrap: break-word;}

#10楼

更改您的代码

word-wrap: break-word;

word-break:break-all;

longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content
Short Content


#11楼

使用溢出包装并与正常的表格布局+表格宽度100%兼容的解决方法

的HTML

wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

的CSS

.content{  word-wrap:break-word; /*old browsers*/  overflow-wrap:break-word;}table{  width:100%; /*must be set (to any value)*/}.overflow-wrap-hack{  max-width:1px;}

好处:

  • 使用而不是word-break:break-all 。 这样做会更好,因为它会先尝试在空格上打断,并且仅在单词大于其容器时才切断单词。
  • 没有table-layout:fixed需要table-layout:fixed 。 使用常规的自动调整大小。
  • 不需要以像素为单位定义固定widthmax-width 。 如果需要,定义父级的%

已在FF57,Chrome62,IE11,Safari11中测试


#12楼

问题

longtextwithoutspace

是如果文本一些空格,例如

long text with andthenlongerwithoutspaces

如果单词andthenlongerwithoutspaces在一行中适合表格单元格,而long text with andthenlongerwithoutspaces不适合,则长单词将被分成两部分,而不是被long text with andthenlongerwithoutspaces行。

替代解决方案:在每个第20个字符后的每个长字中插入U + 200B( ),U + 00AD( )或U + 200C( )(但是,请参见下面的警告):

td { border: 1px solid; }
Looooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooong word
Short word

警告 :插入其他零长度字符不会影响阅读。 但是,它确实会影响复制到剪贴板的文本(这些字符当然也会被复制)。 如果剪贴板文本稍后在Web应用程序的某些搜索功能中使用,则搜索将被破坏。 尽管可以在某些知名的Web应用程序中看到此解决方案,但请尽可能避免。

警告 :插入其他字符时,请勿在字形内分隔多个代码点。 有关更多信息,请参见 。


#13楼

如前所述,将文本放在div几乎可行。 您只需要指定divwidth ,这对于静态布局是幸运的。

这适用于FF 3.6,IE 8,Chrome。

  

#14楼

longtexthere


#15楼

看看

LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord
Foo

这是链接


#16楼

在IE 8和Chrome 13中进行了测试。

longtexthere
Foo

这将导致表格适合页面的宽度,而每一列占据该宽度的50%。

如果你喜欢第一列占用更多的页面,添加width: 80%td在下面的例子中,与您所选择的替代率80%。

longtexthere
Foo

#17楼

需要做的唯一的事情就是增加宽度与<td><div>里面的<td>取决于你想要达到的布局。

例如:

looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word
Foo

要么

looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word
Foo

#18楼

看来您需要设置word-wrap:break-word; 在具有指定(非相对)宽度的块元素( div )上。 例如:

loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
Foo

或按照Abhishek Simon的建议使用word-break:break-all


#19楼

与Google Chrome和Firefox一起使用的解决方案(未经Internet Explorer测试)是将display: table-cell为一个块元素。


#20楼

我发现了一个似乎可以在Firefox,Google Chrome和Internet Explorer 7-9中运行的解决方案。 用于在一侧放置长文本的两列表格布局。 我到处搜索类似的问题,在一个浏览器中起作用的浏览器破坏了另一个问题,或者在表中添加了更多标签,似乎编码不好。

我没有为此使用表格。 DL DT DD来营救。 至少对于固定两列布局,这基本上是词汇/词典/词义设置。

还有一些通用的样式。

dl { margin-bottom:50px; } dl dt { background:#ccc; color:#fff; float:left; font-weight:bold; margin-right:10px; padding:5px; width:100px; } dl dd { margin:2px 0; padding:5px 0; word-wrap:break-word; margin-left:120px; }
test1
Fusce ultricies mi nec orci tempor sit amet
test2
Fusce ultricies
longest
Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum, in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per.

使用浮动的自动换行和左边距,我完全可以得到所需的内容。 只是以为我会与其他人分享这一点,也许它将以两栏定义样式的布局帮助其他人,而使文字难以换行。

我曾尝试在表格单元格中使用自动换行功能,但是它仅在Internet Explorer 9(当然还有Firefox和Google Chrome)中有效,主要是试图在此处修复损坏的Internet Explorer浏览器。

转载地址:http://gldnb.baihongyu.com/

你可能感兴趣的文章
ROS 常用加速指令
查看>>
ubuntu ssh登入速度太慢的解决办法
查看>>
罕见bug解决办法: kienct 1代运行错误Failed to claim camera interface: LIBUSB_ERROR_NOT_FOUND
查看>>
rviz的简单使用
查看>>
解决ROS的usb_cam节点无法正常读取mjpeg格式摄像头的方法
查看>>
Ubuntu VNC 如何调整分辨率
查看>>
病毒编程技术-3
查看>>
病毒编程技术-4
查看>>
病毒编程技术-5
查看>>
第9周上机实践项目1——利用循环求和
查看>>
第9周上机实践项目2——分数的累加
查看>>
第9周上机实践项目3——输出星号图
查看>>
第9周上机实践项目4——乘法口诀表
查看>>
第9周上机实践项目5——程序填充题
查看>>
第9周上机实践项目6——穷举法解决组合问题(1~3)
查看>>
第9周上机实践项目6——穷举法解决组合问题(3~7)
查看>>
第九周感想——就这样前进!
查看>>
第10周上机实践项目1——程序填充与阅读
查看>>
第10周上机实践项目2——M$pszi$y是嘛意思?
查看>>
第10周上机实践项目3——血型统计
查看>>