使用CSS防止在两栏HTML报告中过早换行。

huangapple
go评论108阅读模式
英文:

Prevent premature wrapping in 2-column HTML report using CSS

问题

我正在使用HTML和CSS构建一个两列的“报告”，然后通过Python中的Weasyprint将其打印成PDF。我的问题是第一列中的内容过早地换行到第二列，最终导致表格损坏，应该保持在一列中。

HTML文件调用了CSS文件：

  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <link href="report.css" rel="stylesheet">
  5.         <title>Report</title>
  6.         <meta name="description" content="Report example">
  7.     </head>
  8.     ...

在某个地方，我在CSS中创建了一个名为“satgeom”的页面样式：

  1. @page {
  2.   @top-left {
  3.     background: #FF874A;
  4.     content: counter(page);
  5.     height: 1cm;
  6.     text-align: center;
  7.     width: 1cm;
  8.   }
  9.   ...
  10. }
  12. html {
  13.   color: #393939;
  14.   font-family: Montserrat;
  15.   font-size: 11pt;
  16.   font-weight: 300;
  17.   line-height: 1.5;
  18. }
  20. .column {
  21.   display: flex;
  22.   flex-direction: column;
  23.   flex-basis: 100%;
  24.   flex: 1;
  25. }
  27. #satgeom section {
  28.   columns: 2;
  29.   column-gap: 1cm;
  30. }

并在HTML中调用这个样式。这个页面的内容包括一个很长的表格和文本。我的问题是表格过早地换行，我无法找出原因。理想情况下，我希望在第一列填满后将文本换行到第二列。以下是“satgeom”页面的HTML片段：

  1. <article id="satgeom">
  2.   <h2 id="satgeom-title">Satellite geometry</h2>
  4.   <h3>Satellite geometry, depiction, and description</h3>
  6.   <section>
  7.     <img src="./satellite.png" alt="">
  8.     <p>
  9.       <table class="tg" style="table-layout: fixed; width: 300px">
  10.         <colgroup>
  11.           <col style="width: 150px">
  12.           <col style="width: 150px">
  13.         </colgroup>
  14.         <tr>
  15.           <td class="tg-zv4m">Name</th>
  16.           <td class="tg-ofj5">Uydu</th>
  17.         </tr>
  18.         <!-- 更多表格行 -->
  19.       </table>
  20.     </p>
  21.     <p>
  22.       Launched in 2024, the Uydu satellite was manufactured by the Turkish
  23.       Aerospace Industries for roughly $600,000,000. The satellite's mission
  24.       is 
  25.     </p>
  26.     <p>
  27.       Construction-wise, the Uydu satellite comprises a main body and two 
  28.       solar panel arrays extending laterally to its side. For power consumption, 
  29.       the solar panels can be rotated to face the sun.
  30.     </p>
  31.   </section>
  32. </article>

我已经尝试过在我的CSS文件中添加div{}并调整了nowrap属性、修改了CSS文件，还进行了多次Google和Stack Overflow搜索，但没有找到解决方法。坦白说，我不确定自己是否在寻找正确的短语。

编辑：Stefan的答案在下面提供了我寻找的“棒球卡”解决方案。

英文:

I'm building a two-column "report" in HTML and CSS (I'm new to both) and printing it to a PDF via Weasyprint in Python. My problem is that content in the first column is wrapping into the second column prematurely, ultimately resulting in a broken table that should remain in one column:

使用CSS防止在两栏HTML报告中过早换行。

The HTML file calls the CSS file:

  1. &lt;html&gt;
  2.     &lt;head&gt;
  3.         &lt;meta charset=&quot;UTF-8&quot;&gt;
  4.         &lt;link href=&quot;report.css&quot; rel=&quot;stylesheet&quot;&gt;
  5.         &lt;title&gt;Report&lt;/title&gt;
  6.         &lt;meta name=&quot;description&quot; content=&quot;Report example&quot;&gt;
  7.     &lt;/head&gt;
  8.     ...

at some point, I create a page style in CSS called "satgeom":

  1. @page {
  2.   @top-left {
  3.     background: #FF874A;
  4.     content: counter(page);
  5.     height: 1cm;
  6.     text-align: center;
  7.     width: 1cm;
  8.   }
  9.   @top-center {
  10.     background: #FF874A;
  11.     content: &#39;&#39;;
  12.     display: block;
  13.     height: .05cm;
  14.     opacity: .5;
  15.     width: 100%;
  16.   }
  17.   @top-right {
  18.     content: string(heading);
  19.     font-size: 9pt;
  20.     height: 1cm;
  21.     vertical-align: middle;
  22.     width: 100%;
  23.   }
  24. }
  25. @page :blank {
  26.   @top-left { background: none; content: &#39;&#39; }
  27.   @top-center { content: none }
  28.   @top-right { content: none }
  29. }
  30. @page no-chapter {
  31.   @top-left { background: none; content: none }
  32.   @top-center { content: none }
  33.   @top-right { content: none }
  34. }
  35. @page :first {
  36.   background: url(report_cover.png) no-repeat center;
  37.   background-size: cover;
  38.   margin: 0;
  39. }
  40. @page chapter {
  41.   background: #FF874A;
  42.   margin: 0;
  43.   @top-left { content: none }
  44.   @top-center { content: none }
  45.   @top-right { content: none }
  46. }
  48. html {
  49.   color: #393939;
  50.   font-family: Montserrat;
  51.   font-size: 11pt;
  52.   font-weight: 300;
  53.   line-height: 1.5;
  54. }
  56. h1 {
  57.   color: #FF874A;
  58.   font-size: 38pt;
  59.   margin: 5cm 2cm 0 2cm;
  60.   page: no-chapter;
  61.   width: 100%;
  62. }
  63. h2, h3, h4 {
  64.   color: black;
  65.   font-weight: 400;
  66. }
  67. h2 {
  68.   break-before: always;
  69.   font-size: 28pt;
  70.   string-set: heading content();
  71. }
  72. h3 {
  73.   font-weight: 300;
  74.   font-size: 15pt;
  75. }
  76. h4 {
  77.   font-size: 13pt;
  78. }
  80. .column {
  81.   display: flex;
  82.   flex-direction: column;
  83.   flex-basis: 100%;
  84.   flex: 1;
  85. }
  87. #satgeom section {
  88.   columns: 2;
  89.   column-gap: 1cm;
  90. }
  91. #satgeom section p {
  92.   text-align: justify;
  93. }
  95. /* Table */
  96. .tg {border-collapse:collapse;border-spacing:0;}
  97. .tg td{border-color:black;border-style:solid;border-width:1px;word-break:normal;}
  98. .tg th{border-color:black;border-style:solid;border-width:1px;word-break:normal;}
  99. .tg .tg-zv4m{border-color:#fcbb9a;text-align:left;vertical-align:top}
  100. .tg .tg-ofj5{border-color:#fcbb9a;text-align:right;vertical-align:top}

and call this style in the HTML. The contents of this page contain a lengthy table and text. My problem is that the table is wrapping prematurely, and I cannot figure out why. Ideally, I would like to wrap the text into the second column after the first column fills up. A snippet of my HTML for the "satgeom" page is as follows:

  1. &lt;article id=&quot;satgeom&quot;&gt;
  2.   &lt;h2 id=&quot;satgeom-title&quot;&gt;Satellite geometry&lt;/h2&gt;
  4.   &lt;h3&gt;Satellite geometry, depiction, and description&lt;/h3&gt;
  6.   &lt;section&gt;
  7.     &lt;img src=&quot;./satellite.png&quot; alt=&quot;&quot;&gt;
  8.     &lt;p&gt;
  9.       &lt;table class=&quot;tg&quot; style=&quot;table-layout: fixed; width: 300px&quot;&gt;
  10.         &lt;colgroup&gt;
  11.           &lt;col style=&quot;width: 150px&quot;&gt;
  12.           &lt;col style=&quot;width: 150px&quot;&gt;
  13.         &lt;/colgroup&gt;
  14.         &lt;tr&gt;
  15.           &lt;td class=&quot;tg-zv4m&quot;&gt;Name&lt;/th&gt;
  16.           &lt;td class=&quot;tg-ofj5&quot;&gt;Uydu&lt;/th&gt;
  17.         &lt;/tr&gt;
  18.         &lt;tr&gt;
  19.           &lt;td class=&quot;tg-zv4m&quot;&gt;Cost [$]&lt;/th&gt;
  20.           &lt;td class=&quot;tg-ofj5&quot;&gt;600,000,000&lt;/th&gt;
  21.         &lt;/tr&gt;
  22.         &lt;tr&gt;
  23.           &lt;td class=&quot;tg-zv4m&quot;&gt;Manufacturer&lt;/td&gt;
  24.           &lt;td class=&quot;tg-ofj5&quot;&gt;TAI&lt;/td&gt;
  25.         &lt;/tr&gt;
  26.         &lt;tr&gt;
  27.           &lt;td class=&quot;tg-zv4m&quot;&gt;Duration [years]&lt;/td&gt;
  28.           &lt;td class=&quot;tg-ofj5&quot;&gt;15&lt;/td&gt;
  29.         &lt;/tr&gt;
  30.         &lt;tr&gt;
  31.           &lt;td class=&quot;tg-zv4m&quot;&gt;Orbit altitude [km]&lt;/td&gt;
  32.           &lt;td class=&quot;tg-ofj5&quot;&gt;35,785&lt;/td&gt;
  33.         &lt;/tr&gt;
  34.         &lt;tr&gt;
  35.           &lt;td class=&quot;tg-zv4m&quot;&gt;Max. velocity [km/s]&lt;/td&gt;
  36.           &lt;td class=&quot;tg-ofj5&quot;&gt;11,051&lt;/td&gt;
  37.         &lt;/tr&gt;
  38.         &lt;tr&gt;
  39.           &lt;td class=&quot;tg-zv4m&quot;&gt;Dy mass [kg]&lt;/td&gt;
  40.           &lt;td class=&quot;tg-ofj5&quot;&gt;1,577&lt;/td&gt;
  41.         &lt;/tr&gt;
  42.         &lt;tr&gt;
  43.           &lt;td class=&quot;tg-zv4m&quot;&gt;NORAD ID&lt;/td&gt;
  44.           &lt;td class=&quot;tg-ofj5&quot;&gt; - &lt;/td&gt;
  45.         &lt;/tr&gt;
  46.         &lt;tr&gt;
  47.           &lt;td class=&quot;tg-zv4m&quot;&gt;Uplink [GHz]&lt;/td&gt;
  48.           &lt;td class=&quot;tg-ofj5&quot;&gt;7.3 - 18.10&lt;/td&gt;
  49.         &lt;/tr&gt;
  50.         &lt;tr&gt;
  51.           &lt;td class=&quot;tg-zv4m&quot;&gt;Downlink [GHz]&lt;/td&gt;
  52.           &lt;td class=&quot;tg-ofj5&quot;&gt;11.70 - 12.75&lt;/td&gt;
  53.         &lt;/tr&gt;
  54.         &lt;tr&gt;
  55.           &lt;td class=&quot;tg-zv4m&quot;&gt;Reference frame&lt;/td&gt;
  56.           &lt;td class=&quot;tg-ofj5&quot;&gt;Geocentric&lt;/td&gt;
  57.         &lt;/tr&gt;
  58.         &lt;tr&gt;
  59.           &lt;td class=&quot;tg-zv4m&quot;&gt;Regime&lt;/td&gt;
  60.           &lt;td class=&quot;tg-ofj5&quot;&gt;Geostationary&lt;/td&gt;
  61.         &lt;/tr&gt;
  62.       &lt;/table&gt;
  63.     &lt;/p&gt;
  64.     &lt;p&gt;
  65.       Launched in 2024, the Uydu satellite was manufactured by the Turkish
  66.       Aerospace Industries for roughly $600,000,000. The satellite&#39;s mission
  67.       is 
  68.     &lt;/p&gt;
  69.     &lt;p&gt;
  70.       Construction-wise, the Uydu satellite comprises a main body and two 
  71.       solar panel arrays extending laterally to its side. For power consumption, 
  72.       the solar panels can be rotated to face the sun.
  73.     &lt;/p&gt;
  74.   &lt;/section&gt;
  75. &lt;/article&gt;

I've tried adding a div{} to my CSS file and messed with the nowrap property, modifying the CSS file, and have also done a number of Google / SO searches, but haven't found a solution. Honestly, I'm not sure I'm looking for the right phrases.

Edit:
Stefan's answer below resulted in the "baseball card" solution I was looking for:
使用CSS防止在两栏HTML报告中过早换行。

答案1

得分: 1

为什么不使用一个包含两个内部div的div来表示每一列。

类似于这样的结构：

  1. <article id="satgeom">
  2.   <h2 id="satgeom-title">卫星几何</h2>
  4.   <h3>卫星几何、描绘和描述</h3>
  6.   <div style="display: flex;">
  7.     <div style="width: 50%; padding-right: 2em;">
  8.       <img style="width: 100%;" src="./satellite.png" alt="">
  9.       <table class="tg" style="table-layout: fixed; width: 100%;">
  10.         <colgroup>
  11.           <col style="width: 150px">
  12.           <col style="width: 150px">
  13.         </colgroup>
  14.         <tr>
  15.           <td class="tg-zv4m">名称</td>
  16.           <td class="tg-ofj5">Uydu</td>
  17.         </tr>
  18.         <tr>
  19.           <td class="tg-zv4m">成本 [$]</td>
  20.           <td class="tg-ofj5">600,000,000</td>
  21.         </tr>
  22.         <tr>
  23.           <td class="tg-zv4m">制造商</td>
  24.           <td class="tg-ofj5">TAI</td>
  25.         </tr>
  26.         <tr>
  27.           <td class="tg-zv4m">运行时间 [年]</td>
  28.           <td class="tg-ofj5">15</td>
  29.         </tr>
  30.         <tr>
  31.           <td class="tg-zv4m">轨道高度 [km]</td>
  32.           <td class="tg-ofj5">35,785</td>
  33.         </tr>
  34.         <tr>
  35.           <td class="tg-zv4m">最大速度 [km/s]</td>
  36.           <td class="tg-ofj5">11,051</td>
  37.         </tr>
  38.         <tr>
  39.           <td class="tg-zv4m">动力质量 [kg]</td>
  40.           <td class="tg-ofj5">1,577</td>
  41.         </tr>
  42.         <tr>
  43.           <td class="tg-zv4m">NORAD ID</td>
  44.           <td class="tg-ofj5"> - </td>
  45.         </tr>
  46.         <tr>
  47.           <td class="tg-zv4m">上行链路 [GHz]</td>
  48.           <td class="tg-ofj5">7.3 - 18.10</td>
  49.         </tr>
  50.         <tr>
  51.           <td class="tg-zv4m">下行链路 [GHz]</td>
  52.           <td class="tg-ofj5">11.70 - 12.75</td>
  53.         </tr>
  54.         <tr>
  55.           <td class="tg-zv4m">参考框架</td>
  56.           <td class="tg-ofj5">地心</td>
  57.         </tr>
  58.         <tr>
  59.           <td class="tg-zv4m">制度</td>
  60.           <td class="tg-ofj5">静止</td>
  61.         </tr>
  62.       </table>
  63.     </div>
  64.     <div style="width: 50%;">
  65.         <p>
  66.           Uydu卫星于2024年发射，由土耳其航空航天工业制造，成本约为$600,000,000。该卫星的任务是
  67.         </p>
  68.         <p>
  69.           在构造上，Uydu卫星由一个主体和两个太阳能电池板数组组成，横向延伸到其侧面。为了供电消耗，太阳能电池板可以旋转以面向太阳。
  70.         </p>
  71.       </div>
  72.   </div>
  73. </article>
英文:

Why not use a div with two divs inside it for each column.

Something like this:

  1. &lt;article id=&quot;satgeom&quot;&gt;
  2.   &lt;h2 id=&quot;satgeom-title&quot;&gt;Satellite geometry&lt;/h2&gt;
  4.   &lt;h3&gt;Satellite geometry, depiction, and description&lt;/h3&gt;
  6.   &lt;div style=&quot;display: flex;&quot;&gt;
  7.     &lt;div style=&quot;width: 50%; padding-right: 2em;&quot;&gt;
  8.       &lt;img style=&quot;width: 100%;&quot; src=&quot;./satellite.png&quot; alt=&quot;&quot;&gt;
  9.       &lt;table class=&quot;tg&quot; style=&quot;table-layout: fixed; width: 100%&quot;&gt;
  10.         &lt;colgroup&gt;
  11.           &lt;col style=&quot;width: 150px&quot;&gt;
  12.           &lt;col style=&quot;width: 150px&quot;&gt;
  13.         &lt;/colgroup&gt;
  14.         &lt;tr&gt;
  15.           &lt;td class=&quot;tg-zv4m&quot;&gt;Name&lt;/td&gt;
  16.           &lt;td class=&quot;tg-ofj5&quot;&gt;Uydu&lt;/td&gt;
  17.         &lt;/tr&gt;
  18.         &lt;tr&gt;
  19.           &lt;td class=&quot;tg-zv4m&quot;&gt;Cost [$]&lt;/td&gt;
  20.           &lt;td class=&quot;tg-ofj5&quot;&gt;600,000,000&lt;/td&gt;
  21.         &lt;/tr&gt;
  22.         &lt;tr&gt;
  23.           &lt;td class=&quot;tg-zv4m&quot;&gt;Manufacturer&lt;/td&gt;
  24.           &lt;td class=&quot;tg-ofj5&quot;&gt;TAI&lt;/td&gt;
  25.         &lt;/tr&gt;
  26.         &lt;tr&gt;
  27.           &lt;td class=&quot;tg-zv4m&quot;&gt;Duration [years]&lt;/td&gt;
  28.           &lt;td class=&quot;tg-ofj5&quot;&gt;15&lt;/td&gt;
  29.         &lt;/tr&gt;
  30.         &lt;tr&gt;
  31.           &lt;td class=&quot;tg-zv4m&quot;&gt;Orbit altitude [km]&lt;/td&gt;
  32.           &lt;td class=&quot;tg-ofj5&quot;&gt;35,785&lt;/td&gt;
  33.         &lt;/tr&gt;
  34.         &lt;tr&gt;
  35.           &lt;td class=&quot;tg-zv4m&quot;&gt;Max. velocity [km/s]&lt;/td&gt;
  36.           &lt;td class=&quot;tg-ofj5&quot;&gt;11,051&lt;/td&gt;
  37.         &lt;/tr&gt;
  38.         &lt;tr&gt;
  39.           &lt;td class=&quot;tg-zv4m&quot;&gt;Dy mass [kg]&lt;/td&gt;
  40.           &lt;td class=&quot;tg-ofj5&quot;&gt;1,577&lt;/td&gt;
  41.         &lt;/tr&gt;
  42.         &lt;tr&gt;
  43.           &lt;td class=&quot;tg-zv4m&quot;&gt;NORAD ID&lt;/td&gt;
  44.           &lt;td class=&quot;tg-ofj5&quot;&gt; - &lt;/td&gt;
  45.         &lt;/tr&gt;
  46.         &lt;tr&gt;
  47.           &lt;td class=&quot;tg-zv4m&quot;&gt;Uplink [GHz]&lt;/td&gt;
  48.           &lt;td class=&quot;tg-ofj5&quot;&gt;7.3 - 18.10&lt;/td&gt;
  49.         &lt;/tr&gt;
  50.         &lt;tr&gt;
  51.           &lt;td class=&quot;tg-zv4m&quot;&gt;Downlink [GHz]&lt;/td&gt;
  52.           &lt;td class=&quot;tg-ofj5&quot;&gt;11.70 - 12.75&lt;/td&gt;
  53.         &lt;/tr&gt;
  54.         &lt;tr&gt;
  55.           &lt;td class=&quot;tg-zv4m&quot;&gt;Reference frame&lt;/td&gt;
  56.           &lt;td class=&quot;tg-ofj5&quot;&gt;Geocentric&lt;/td&gt;
  57.         &lt;/tr&gt;
  58.         &lt;tr&gt;
  59.           &lt;td class=&quot;tg-zv4m&quot;&gt;Regime&lt;/td&gt;
  60.           &lt;td class=&quot;tg-ofj5&quot;&gt;Geostationary&lt;/td&gt;
  61.         &lt;/tr&gt;
  62.       &lt;/table&gt;
  63.     &lt;/div&gt;
  64.     &lt;div style=&quot;width: 50%;&quot;&gt;
  65.         &lt;p&gt;
  66.           Launched in 2024, the Uydu satellite was manufactured by the Turkish
  67.           Aerospace Industries for roughly $600,000,000. The satellite&#39;s mission
  68.           is
  69.         &lt;/p&gt;
  70.         &lt;p&gt;
  71.           Construction-wise, the Uydu satellite comprises a main body and two
  72.           solar panel arrays extending laterally to its side. For power consumption,
  73.           the solar panels can be rotated to face the sun.
  74.         &lt;/p&gt;
  75.       &lt;/div&gt;
  76.   &lt;/div&gt;
  77. &lt;/article&gt;

答案2

得分: 0

Here is the translated code:

  1. 在你的代码中有两个问题。首先，你已经在`#satgeom section`选择器内声明了部分的列，这将使`<section>`元素跨越两列，包括表格。让我们将表格保留在一列中。
  3. #satgeom section table {
  4.     column-span: all;
  5. }
  7. 另外，表格被包裹在`<p>`标签中，让我们替换它：
  9. <table class="tg" style="table-layout: fixed; width: 300px">
  10. ...
  11. </table>
英文:

There is 2 problem in your code, first you have declared your columns for the section within the #satgeom section selector, that will make the &lt;section&gt; element distributed across two columns, including the table, lets make the table stays in one column.

  1. #satgeom section table {
  2. column-span: all;
  3. }

Also the table is wrapped table with a &lt;p&gt; tag, lets replace this:

  1. &lt;p&gt;
  2. &lt;table class=&quot;tg&quot; style=&quot;table-layout: fixed; width: 300px&quot;&gt;
  3. ...
  4. &lt;/table&gt;
  5. &lt;/p&gt;

with

  1. &lt;table class=&quot;tg&quot; style=&quot;table-layout: fixed; width: 300px&quot;&gt;
  2. ...
  3. &lt;/table&gt;

huangapple
  • 本文由 发表于 2023年6月6日 03:13:51
  • 转载请务必保留本文链接：https://go.coder-hub.com/76409390.html
  • css
  • html
  • python
  • python-3.x
  • weasyprint
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定