Question

我们正在使用xml / xslt / css和pdfreactor打印医学报告。因此，我们需要单位精确的位置。

该报告为表格，每页应重复一些标题（红色）。在表格第2行（= Analysis2）中，列结果中的字段太长，无法容纳该列，我想用css（或javascript？）换行，就像表格第3行（Analysis3）一样，我准备了这一行，使其看起来像我的期望）。结果在医学报告中太重要，因此不应包装。边界不重要。

@media print {
  @page {
    size: a4;
    margin: 1cm;
    margin-top: 4cm;
    margin-bottom: 8cm;
  }
}

body
{
margin:0;
padding:0;
}

.PatientBox, .ResultBox, .AnalysisGroup {
  display:table;
/*   border-style: solid;  */
}

.PatientBoxHeader, .ResultBoxHeader, .AnalysisGruppeHeader {
  display: table-header-group;
  font-weight: bold;
  color: red;
/*   border-style: solid; */
}

.Analysis, .Result, .ReferenceRange {
  float: left;
}
.Result{ position: absolute; left: 6.2cm;}  
.ReferenceRange { position: absolute; left: 10cm; } 


.ResultLine {
  display: table;
 } 
  
.ResultAnalysis, .Value, .ResultUnit, .Reference {
  display: table-cell;
  border-width: 0.01mm;
  border-style: solid;
/*   word-wrap: break-word; */
}

.ResultAnalysis { min-width: 6.2cm; max-width: 6.2cm; }
.Value { min-width: 1.8cm; max-width: 1.8cm; }
.ResultUnit { min-width: 1.8cm; max-width: 1.8cm; }
.Reference { min-width: 2.5cm; max-width: 2.5cm; }

<html>
<head>
    <link rel="stylesheet" href="test6.css" type="text/css" />
</head>
<body>

<div class="PatientBox">                        <!-- Table -->
  <div class="PatientBoxHeader">Patient John Doe</div>      <!-- TableGroup -->

  <div class="ResultBox">                           <!--  Table  -->
    <div class="ResultBoxHeader">                       <!-- TableGroup -->
        <div class="Analysis">Analysis</div>
        <div class="Result">Result</div>
        <div class="ReferenceRange">Reference Range</div>
    </div>
    <div class="AnalysisGroup">                              <!--  Table  -->
      <div class="AnalysisGruppeHeader">Title1                  <!-- TableGroup -->
      </div>
      <div class="ResultLine">
          <div class="ResultAnalysis">Analysis1
          </div>
          <div class="Value">1000</div>
          <div class="ResultUnit">very lang ResultUnit xxxx</div>
          <div class="Reference">1-10</div>
      </div>
      <div class="Comment">Comment</div>
      <div class="ResultLine">
          <div class="ResultAnalysis">Analysis2 veeeery veeeeery veeeery very long
          </div>
          <div class="Value">1000000000000</div>
          <div class="ResultUnit">mg/l</div>
          <div class="Reference">1-10</div>
      </div>
      <div class="Comment">Comment</div>
      <div class="ResultLine">
          <div class="ResultAnalysis">Analysis3 
          </div>
          <div class="Value">1000000000000</div>
          <div class="ResultUnit"></div>
          <div class="Reference"></div>
      </div>
      <div class="ResultLine">
          <div class="ResultAnalysis">
          </div>
          <div class="Value"></div>
          <div class="ResultUnit">mg/l</div>
          <div class="Reference">1-10</div>
      </div>
      <div class="Comment">Comment</div>
    </div>
</div>
</div>
</body>
</html>

Answer 1

我建议也使用真实表，但是您可以在CSS中使用word-break: break-all;。

我将其放在正文中作为示例，但我不建议这样做，因为它会在任何地方打断单词。

@media print {
  @page {
    size: a4;
    margin: 1cm;
    margin-top: 4cm;
    margin-bottom: 8cm;
  }
}

body
{
margin:0;
padding:0;
word-break: break-all;
}

.PatientBox, .ResultBox, .AnalysisGroup {
  display:table;
/*   border-style: solid;  */
}

.PatientBoxHeader, .ResultBoxHeader, .AnalysisGruppeHeader {
  display: table-header-group;
  font-weight: bold;
  color: red;
/*   border-style: solid; */
}

.Analysis, .Result, .ReferenceRange {
  float: left;
}
.Result{ position: absolute; left: 6.2cm;}  
.ReferenceRange { position: absolute; left: 10cm; } 


.ResultLine {
  display: table;
 } 
  
.ResultAnalysis, .Value, .ResultUnit, .Reference {
  display: table-cell;
  border-width: 0.01mm;
  border-style: solid;
/*   word-wrap: break-word; */
}

.ResultAnalysis { min-width: 6.2cm; max-width: 6.2cm; }
.Value { min-width: 1.8cm; max-width: 1.8cm; }
.ResultUnit { min-width: 1.8cm; max-width: 1.8cm; }
.Reference { min-width: 2.5cm; max-width: 2.5cm; }

<html>
<head>
    <link rel="stylesheet" href="test6.css" type="text/css" />
</head>
<body>

<div class="PatientBox">                        <!-- Table -->
  <div class="PatientBoxHeader">Patient John Doe</div>      <!-- TableGroup -->

  <div class="ResultBox">                           <!--  Table  -->
    <div class="ResultBoxHeader">                       <!-- TableGroup -->
        <div class="Analysis">Analysis</div>
        <div class="Result">Result</div>
        <div class="ReferenceRange">Reference Range</div>
    </div>
    <div class="AnalysisGroup">                              <!--  Table  -->
      <div class="AnalysisGruppeHeader">Title1                  <!-- TableGroup -->
      </div>
      <div class="ResultLine">
          <div class="ResultAnalysis">Analysis1
          </div>
          <div class="Value">1000</div>
          <div class="ResultUnit">very lang ResultUnit xxxx</div>
          <div class="Reference">1-10</div>
      </div>
      <div class="Comment">Comment</div>
      <div class="ResultLine">
          <div class="ResultAnalysis">Analysis2 veeeery veeeeery veeeery very long
          </div>
          <div class="Value">1000000000000</div>
          <div class="ResultUnit">mg/l</div>
          <div class="Reference">1-10</div>
      </div>
      <div class="Comment">Comment</div>
      <div class="ResultLine">
          <div class="ResultAnalysis">Analysis3 
          </div>
          <div class="Value">1000000000000</div>
          <div class="ResultUnit"></div>
          <div class="Reference"></div>
      </div>
      <div class="ResultLine">
          <div class="ResultAnalysis">
          </div>
          <div class="Value"></div>
          <div class="ResultUnit">mg/l</div>
          <div class="Reference">1-10</div>
      </div>
      <div class="Comment">Comment</div>
    </div>
</div>
</div>
</body>
</html>

Answer 2

以下是实际表格的示例。

body {
  font-family: Arial, sans-serif;
}

table {
  width: 100%;
}

caption {
  text-align: left;
  font-size: 18px;
}

th {
  background: #eee;
}

td {
  border: 1px solid #eee;
  padding: 5px;
  min-width: 80px;
}

<table>
<caption>Patient John Doe</caption>
<thead>
<tr>
    <th>Analysis</th>
    <th colspan="2">Result</th>
    <th colspan="2" class="ReferenceRange">Reference Range</th>
</tr>

<tr>
    <th colspan="5" class="AnalysisGruppeHeader">Title 1</th>
</tr>
</thead>

<tbody>
<tr class="AnalysisGroup">
    <td class="ResultAnalysis">Analysis1</td>
    <td class="Value">1000</td>
    <td class="ResultUnit">mg/l</td>
    <td class="Reference">1-10</td>
</tr>

<tr>
    <td colspan="5" class="Comment">Comment</td>
</tr>
</tbody>

<thead>
<tr>
    <th colspan="5" class="AnalysisGruppeHeader">Title 2</th>
</tr>
</thead>

<tbody>
<tr class="AnalysisGroup">
    <td class="ResultAnalysis">Really long analysis 1 goes on for some time.</td>
    <td class="Value">10000000000000000000000</td>
    <td class="ResultUnit">mg/l</td>
    <td class="Reference">1-10</td>
</tr>

<tr>
    <td colspan="5" class="Comment">Comment</td>
</tr>
</tbody>

<thead>
<tr>
    <th colspan="5" class="AnalysisGruppeHeader">Title 3</th>
</tr>
</thead>

<tbody>
<tr class="AnalysisGroup">
    <td class="ResultAnalysis">Analysis1</td>
    <td class="Value">1000</td>
    <td class="ResultUnit">mg/l</td>
    <td class="Reference">1-10</td>
</tr>

<tr>
    <td colspan="5" class="Comment">Comment</td>
</tr>
</tbody>
</table>

如果元素的文本内容太长，如何在布局网格中强制换行？

2 个答案: