假设我有一个每行有一列的表,其中单元格包含文本。其中一行的文本比其他行长得多。我想显示一个表格,在计算表格宽度时不考虑该行;也就是说,宽度与移除长行的宽度相同。然后将长文本包裹在几行上。
示例:
<html>
<head>
<title>tabtest</title>
<style type="text/css">
#tab1 { border-style: solid; border-collapse: collapse }
table#tab1 td { border-style: solid; border-width : 1px;
padding: 5px }
</style>
</head>
<body>
<table id="tab1">
<tr><td>Veni, vidi, vici</td></tr>
<tr><td>All's well that ends well</td></tr>
<tr><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td></tr>
<tr><td>Let them eat cake</td></tr>
</table>
</body>
</html>
这使得表格宽度成为浏览器窗口的整个宽度(真正的长文本包裹超过3行)。这不是我想要的。我试图让它显示出来,以便表格宽度基于第二行(其余三行中最长的一行)。然后第三行将包裹许多行(这很难看,但在我正在处理的现实生活中,它不会那么糟糕)。
我已尝试width: inherit
,width: 100%
,word-wrap: break-word
的各种组合,可以在<td>
中用于长行,也可以单独或双重嵌套该单元格中的<div>
元素,但我没有做任何事情来做我想做的事。