7

私はたくさんのテキストを載せたウェブサイトを持っています。印刷時に読みやすくするために、ページ化された2列のレイアウトを作成したいと思います。つまり、ページごとに2列が必要で、1列目のテキストを2列目に折り返し、そこから次のページに折り返す必要があります。 2つの非常に高い列をページにカットする）：

Wanted   Not Wanted

 1 2       1 4
 ---       ---
 3 4       2 5
 ---       ---
 5 6       3 6

誰かがこれの実用的な例を持っていますか？

4

3 に答える 3

9

あなたはこれを使うことができますcss

@media print {
  body{
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;
  }
}

また、単一の列タイトルを追加することもできます。

CSS

@media print {
  .two {
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;
  }
  .one {
    column-count: 1;
    -webkit-column-count: 1;
    -moz-column-count: 1;
  }
}

HTML

<section class="one">
   <h1>My awesome project</h1>
</section>
<section class="two">
   Very long content
</section>

例

h1 {
  text-align: center
}

count::before {
  counter-increment: section;
  content: "\A I am flag " counter(section) ".\A ";
  font-weight: bold;
  white-space: pre;
}

@media print {
  .two {
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;
  }
  .one {
    column-count: 1;
    -webkit-column-count: 1;
    -moz-column-count: 1;
  }
  input[type="button"] {
    display: none
  }
}
<input type="button" onclick="print()" value=" --> Click Here to print! <--">

<section class="one">
  <h1>My awesome project</h1>
  <h2>Chapter 1</h2>
</section>
<section class="two">
  <count/>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit libero eu diam dignissim, eget scelerisque lorem facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tempor lacus sit amet faucibus sodales. Sed mattis sed
  felis ut lacinia. Proin pretium augue nec condimentum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi dignissim vulputate sagittis. Integer diam justo, suscipit a metus sed, facilisis condimentum
  nibh. Nulla ut accumsan lorem, semper iaculis lectus. Pellentesque a nulla id elit accumsan gravida venenatis at urna. Quisque convallis pellentesque arcu, nec cursus nibh bibendum vel. Praesent porta est sit amet nisi hendrerit bibendum. Sed condimentum,
  mi vel accumsan pellentesque, magna orci tincidunt nulla, at imperdiet nunc odio nec metus. Sed ac interdum diam. Donec eget lacus at nisi cursus luctus. Curabitur id quam tellus. Maecenas euismod magna non faucibus lobortis. Morbi varius nunc vitae
  dictum pellentesque. Proin condimentum porttitor felis, a eleifend lorem viverra at. Quisque lobortis aliquet ex et malesuada. Curabitur mattis elit nec felis efficitur, et tincidunt nulla eleifend. Curabitur ac pulvinar est. Cras semper vitae mauris
  vitae congue. Nunc sit amet pharetra erat. Sed mattis nunc ac rhoncus euismod. Nam sapien justo, consequat in tortor vitae, vulputate varius diam. Nulla ut velit consequat enim dictum mattis sit amet quis purus. Ut malesuada sapien vel massa dapibus
  vehicula. Nunc consequat neque eros, eget consectetur nisl suscipit vel. Nam eget bibendum felis. Donec pellentesque neque ultricies mi imperdiet, eu aliquet velit tempus. Sed ornare tincidunt velit, ac venenatis neque. Fusce condimentum fringilla est,
  eu malesuada sem faucibus hendrerit. Cras vitae placerat dui. Nam pellentesque tortor ac metus convallis mattis. Pellentesque maximus fermentum porttitor. Vestibulum vehicula enim feugiat, cursus sem non, luctus nisl. Morbi rhoncus dignissim ante et
  fringilla. Vivamus et augue in orci consectetur faucibus at ut ante. Etiam ipsum massa, semper ut congue a, consequat eu turpis.
  <count/>
  Nunc rutrum erat eget lorem vehicula blandit. Vivamus dictum sem diam, semper pellentesque ipsum finibus suscipit. Aenean fringilla dapibus felis, vitae faucibus lectus ultrices a. Etiam et mi eget ex posuere venenatis. Vestibulum efficitur lacinia augue
  vel scelerisque. Nunc cursus nisl a odio laoreet, sit amet ornare risus faucibus. Nulla facilisi. Ut aliquam egestas justo, id dignissim urna sodales in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas
  ut elementum mi, eget varius sapien. Praesent lectus purus, vehicula euismod fringilla vestibulum, iaculis quis dui. In elit augue, aliquam nec nisi at, vehicula sodales tortor. Proin feugiat blandit eros, at elementum erat. Etiam mi orci, euismod vitae
  mollis vel, facilisis in ipsum. Donec porta dolor sed hendrerit tempor. Morbi et eros sit amet lorem tristique luctus sed non felis. Aenean eros dui, hendrerit sed odio quis, cursus sollicitudin felis. Nullam tincidunt sed mi nec dictum. Curabitur velit
  purus, gravida nec luctus at, vehicula ut lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque vitae est eu ipsum scelerisque ullamcorper sit amet commodo elit. Nulla ut commodo tortor.
  <count/>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit libero eu diam dignissim, eget scelerisque lorem facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tempor lacus sit amet faucibus sodales. Sed mattis sed
  felis ut lacinia. Proin pretium augue nec condimentum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi dignissim vulputate sagittis. Integer diam justo, suscipit a metus sed, facilisis condimentum
  nibh. Nulla ut accumsan lorem, semper iaculis lectus. Pellentesque a nulla id elit accumsan gravida venenatis at urna. Quisque convallis pellentesque arcu, nec cursus nibh bibendum vel. Praesent porta est sit amet nisi hendrerit bibendum. Sed condimentum,
  mi vel accumsan pellentesque, magna orci tincidunt nulla, at imperdiet nunc odio nec metus. Sed ac interdum diam. Donec eget lacus at nisi cursus luctus. Curabitur id quam tellus. Maecenas euismod magna non faucibus lobortis. Morbi varius nunc vitae
  dictum pellentesque. Proin condimentum porttitor felis, a eleifend lorem viverra at. Quisque lobortis aliquet ex et malesuada. Curabitur mattis elit nec felis efficitur, et tincidunt nulla eleifend. Curabitur ac pulvinar est. Cras semper vitae mauris
  vitae congue. Nunc sit amet pharetra erat. Sed mattis nunc ac rhoncus euismod. Nam sapien justo, consequat in tortor vitae, vulputate varius diam. Nulla ut velit consequat enim dictum mattis sit amet quis purus. Ut malesuada sapien vel massa dapibus
  vehicula.
  <count/>
  Nunc consequat neque eros, eget consectetur nisl suscipit vel. Nam eget bibendum felis. Donec pellentesque neque ultricies mi imperdiet, eu aliquet velit tempus. Sed ornare tincidunt velit, ac venenatis neque. Fusce condimentum fringilla est, eu malesuada
  sem faucibus hendrerit. Cras vitae placerat dui. Nam pellentesque tortor ac metus convallis mattis. Pellentesque maximus fermentum porttitor. Vestibulum vehicula enim feugiat, cursus sem non, luctus nisl. Morbi rhoncus dignissim ante et fringilla. Vivamus
  et augue in orci consectetur faucibus at ut ante. Etiam ipsum massa, semper ut congue a, consequat eu turpis. Nunc rutrum erat eget lorem vehicula blandit. Vivamus dictum sem diam, semper pellentesque ipsum finibus suscipit. Aenean fringilla dapibus
  felis, vitae faucibus lectus ultrices a. Etiam et mi eget ex posuere venenatis. Vestibulum efficitur lacinia augue vel scelerisque. Nunc cursus nisl a odio laoreet, sit amet ornare risus faucibus. Nulla facilisi. Ut aliquam egestas justo, id dignissim
  urna sodales in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas ut elementum mi, eget varius sapien. Praesent lectus purus, vehicula euismod fringilla vestibulum, iaculis quis dui. In elit augue,
  aliquam nec nisi at, vehicula sodales tortor. Proin feugiat blandit eros, at elementum erat.
  <count/>
  Etiam mi orci, euismod vitae mollis vel, facilisis in ipsum. Donec porta dolor sed hendrerit tempor. Morbi et eros sit amet lorem tristique luctus sed non felis. Aenean eros dui, hendrerit sed odio quis, cursus sollicitudin felis. Nullam tincidunt sed
  mi nec dictum. Curabitur velit purus, gravida nec luctus at, vehicula ut lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque vitae est eu ipsum scelerisque ullamcorper sit amet commodo elit. Nulla
  ut commodo tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit libero eu diam dignissim, eget scelerisque lorem facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tempor lacus sit amet faucibus
  sodales. Sed mattis sed felis ut lacinia. Proin pretium augue nec condimentum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi dignissim vulputate sagittis. Integer diam justo, suscipit a metus
  sed, facilisis condimentum nibh. Nulla ut accumsan lorem, semper iaculis lectus. Pellentesque a nulla id elit accumsan gravida venenatis at urna. Quisque convallis pellentesque arcu, nec cursus nibh bibendum vel. Praesent porta est sit amet nisi hendrerit
  bibendum. Sed condimentum, mi vel accumsan pellentesque, magna orci tincidunt nulla, at imperdiet nunc odio nec metus.
  <count/>
  Sed ac interdum diam. Donec eget lacus at nisi cursus luctus. Curabitur id quam tellus. Maecenas euismod magna non faucibus lobortis. Morbi varius nunc vitae dictum pellentesque. Proin condimentum porttitor felis, a eleifend lorem viverra at. Quisque
  lobortis aliquet ex et malesuada. Curabitur mattis elit nec felis efficitur, et tincidunt nulla eleifend. Curabitur ac pulvinar est. Cras semper vitae mauris vitae congue. Nunc sit amet pharetra erat. Sed mattis nunc ac rhoncus euismod. Nam sapien justo,
  consequat in tortor vitae, vulputate varius diam. Nulla ut velit consequat enim dictum mattis sit amet quis purus. Ut malesuada sapien vel massa dapibus vehicula. Nunc consequat neque eros, eget consectetur nisl suscipit vel. Nam eget bibendum felis.
  Donec pellentesque neque ultricies mi imperdiet, eu aliquet velit tempus. Sed ornare tincidunt velit, ac venenatis neque. Fusce condimentum fringilla est, eu malesuada sem faucibus hendrerit. Cras vitae placerat dui. Nam pellentesque tortor ac metus
  convallis mattis. Pellentesque maximus fermentum porttitor. Vestibulum vehicula enim feugiat, cursus sem non, luctus nisl. Morbi rhoncus dignissim ante et fringilla. Vivamus et augue in orci consectetur faucibus at ut ante. Etiam ipsum massa, semper
  ut congue a, consequat eu turpis.
  <count/>
  Nunc rutrum erat eget lorem vehicula blandit. Vivamus dictum sem diam, semper pellentesque ipsum finibus suscipit. Aenean fringilla dapibus felis, vitae faucibus lectus ultrices a. Etiam et mi eget ex posuere venenatis. Vestibulum efficitur lacinia augue
  vel scelerisque. Nunc cursus nisl a odio laoreet, sit amet ornare risus faucibus. Nulla facilisi. Ut aliquam egestas justo, id dignissim urna sodales in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas
  ut elementum mi, eget varius sapien. Praesent lectus purus, vehicula euismod fringilla vestibulum, iaculis quis dui. In elit augue, aliquam nec nisi at, vehicula sodales tortor. Proin feugiat blandit eros, at elementum erat.
</section>

<input type="button" onclick="print()" value=" --> Click Here to print! <--">

于 2017-04-15T18:48:20.813 に答える
1

cssパラメーターを使用して@media print、印刷専用のさまざまなスタイルを定義できます。

HTMLの例を見せていただければ、適切な解決策を提供できますが、一般的には、float:left;アンダーを使用してdivまたはテーブルを定義できます@media print。

于 2011-01-11T08:28:44.493 に答える
0

CSSの印刷スタイルでこれを行うこともできますが、テーブルとフローティングdivに注意する必要があります。常に機能するとは限りません。ページ分割前

于 2011-01-13T10:35:13.383 に答える