jquery - 根据文本量追加表列

Question

对此比较陌生，但我想将一堆文本放入表格单元格中——如果文本多于表格的最大高度所允许的——将自动为其余部分创建一个新列要流入的文本。

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

Answer 1

虽然对代码没有直接的不利影响，但使用 <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>