时间戳

首页 > 解决方案 > 根据文本量附加表格列

jquery - 根据文本量附加表格列

问题描述

对此相当新，但我想将一堆文本放入一个表格单元格中，并且 - 如果它比表格的最大高度允许的文本更多 - 将自动为其余文本创建一个新列流入。

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>')
};

标签： jqueryhtmlcss

解决方案

尽管对代码没有直接的不利影响，但将其<table>用于布局被认为是不好的做法。使用 CSS 属性可以轻松完成简单的报纸栏目布局columns。以下演示具有em在浏览器默认font-size: 16px(18.75em = 300px / 9.375em = 150px) 时提供的长度的等效值。

该columns属性是简写形式：

  • 第一个值 --column-count是允许的最大列数（演示最多允许 12 个）。

  • 第二个值——column-width每列的理想宽度。

  • column-gap是列之间的宽度。

.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>

推荐阅读