gpt4 book ai didi

html - CSS - 防止表格单元格扩展和截断长文本

转载 作者:太空狗 更新时间:2023-10-29 14:42:44 24 4
gpt4 key购买 nike

有人可以告诉我为什么这不会截断文本吗?最后一个细胞一直在增长。我不希望细胞生长超过其允许的百分比。

<HTML>
<TABLE id=section1 width="100%">
<TBODY>
<TR style="TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">
<TD style="WIDTH: 8%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL A</TD>
<TD style="WIDTH: 18%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL B</TD>
<TD style="WIDTH: 22%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL C</TD>
<TD style="WIDTH: 14%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL D</TD>
<TD style="WIDTH: 12%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL E</TD>
<TD style="WIDTH: 10%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL F</TD>
<TD style="WIDTH: 12%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL G</TD>
<TD style="WIDTH: 4%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG</TD>
</TR>
</TBODY>
</TABLE>
</HTML>

这是一个demo on jsFiddle

最佳答案

word-wrap: break-word 添加到您的单元格样式..

虽然你真的应该避免内联样式并为单元格声明一个类..

更新:

jsfiddle

关于html - CSS - 防止表格单元格扩展和截断长文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9725836/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com