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（18.75em = 300px / 9.375em = 150px）中具有与font-size: 16px等效的长度。

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>

根据文本量追加表列

1 个答案: