根据文本量追加表列
根据文本量追加表列
提问于 2019-04-24 03:00:41
这对我来说还是个新手，但是我想把一大堆文本放到一个表格单元格中，如果文本比表格的最大高度所允许的多，它会自动创建一个新的列，让其余的文本排入其中。
HTML
<table id="text" style="max-height: 150px; width:300px;" border="0">
<tr>
<td id="sized">Phasellus velit nisl, interdum in tempor tempus, luctus quis purus. Curabitur dapibus purus quis dui tristique lacinia. Maecenas ut venenatis augue. Vestibulum nec pellentesque orci, nec efficitur massa. Aliquam at est ac mauris molestie luctus. Nullam ac blandit nulla. Donec fringilla eros odio. Vestibulum cursus gravida urna in gravida. Fusce iaculis purus et sem vestibulum, quis mollis nunc rhoncus. Phasellus cursus lectus at bibendum pretium. Interdum et malesuada fames ac ante ipsum primis in faucibus.</td>
</tr>
</table>$('#text tr')
if (this.sized > 150) {
.append('<td> </td>')
};回答 1
Stack Overflow用户
发布于 2019-04-24 06:23:26
虽然对代码没有直接的负面影响，但使用<table>进行布局被认为是不好的做法。可以使用CSS属性columns轻松完成简单的报纸栏目布局。下面的演示具有与浏览器默认长度font-size: 16px (18.75em = 300px / 9.375em = 150px)中提供的长度等效的em。
columns属性采用速记形式：
- first value --
column-count是允许的最大列数(演示最多允许12个)。 - second value --
column-width是每个demo的理想宽度是列之间的宽度。
.text {
columns: 12 18.75em;
column-gap: 1em;
max-height: 9.375em;
}<article class='text'>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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</p>
<p>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 laborumLorem ipsum dolor sit amet, consectetur adipisicing 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</p>
<p>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</p>
</article>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55817788
复制相关文章
相似问题