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

Question

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

该报告是一个 table 部分 headers 应该在每一页上重复（红色）。在 table 第 2 行 (=Analysis2) 中，列 Result 中的字段太长，不适合该列，我想用 css (或 javascript?) 就像在 table 第 3 行中一样（分析 3，我准备了这一行，以便它看起来像我的期望）。结果在医疗报告中太重要了，不应该被包裹起来。边框不相关。

@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

这里是实际 table 的示例。

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>

Answer 3

问题已解决。

@media print {
  @page {
    size: a4;
    margin: 1cm;
    margin-top: 4cm;
    margin-bottom: 8cm;
  }
}

body
{
margin:0;
padding:0;
}

.PatientBox, .ResultBox, .AnalysisGroup {
  display:table;
}

.ResultBoxHeader .Analysis,
.ResultBoxHeader .Result, 
.ResultBoxHeader .ReferenceRange {
  float: left;
  color: green;
}
.ResultBoxHeader .Result{ position: absolute; left: 6.2cm;}  
.ResultBoxHeader .ReferenceRange { position: absolute; left: 10cm; } 

.PatientBoxHeader, .ResultBoxHeader, .AnalysisGruppeHeader {
  display: table-header-group;
  font-weight: bold;
  color: red;
  border-style: solid;
}

.AnalysenBox {
  clear: left;
}

.ResultLine {
  display: table;
 } 
 
  
.ResultLine .ResultAnalysis, 
.ResultLine .ResultBox,
.ResultLine .ResultReference {
  display: table-cell;
  border-width: 0.01mm;
/*   border-style: solid; */
  color: blue;
}

.Result { 
  display: block;
}

.ResultValue, .ResultUnit { 
  display: inline-block;
}

.ResultUnit { 
  float: right;
}

.ResultAnalysis, .ResultUnit, .ResultReference 
{ 
  word-wrap: break-word;
}

.ResultAnalysis { min-width: 6.2cm; max-width: 6.2cm; }
.ResultLine .ResultBox  { min-width: 3.8cm; max-width: 3.8cm;  } 
.ResultValue { min-width: 1.8cm; max-width: 3.8cm; }
.ResultUnit { min-width: 2cm; max-width: 2cm; }
.Reference { min-width: 2.5cm; max-width: 2.5cm; }

<html>
<head>
    <link rel="stylesheet" href="test7.css" type="text/css" />
</head>
<body>

<div class="PatientBox">                        <!-- Table -->
  <div class="PatientBoxHeader">Patient</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="AnalysenBox">
      <div class="AnalysisGroup">                              <!--  Table  -->
        <div class="AnalysisGruppeHeader">                    <!-- TableGroup -->
          <div class="Title">Title1</div>
        </div>
        <div class="ResultLine">
          <div class="ResultAnalysis">Analysis1</div>
          <div class="ResultBox">
            <div class="Result">
             <div class="ResultValue">1000</div>
             <div class="ResultUnit">very lang ResultUnit xxxx</div>
            </div>
          </div>
          <div class="ResultReference">1-10</div>
        </div>
        <div class="Comment">Comment dhsgdahdhagjsdhas dgashadgahsdg adghsgadhgad adgahdgahdsgahgdhasgd</div>
        <div class="ResultLine">
          <div class="ResultAnalysis">Analysis2</div>
          <div class="ResultBox">
            <div class="Result">
             <div class="ResultValue">10000000000</div>
             <div class="ResultUnit">very lang ResultUnit xxxx</div>
            </div>
          </div>
          <div class="ResultReference">1-10</div>
        </div>
    </div>
  </div>
</div>
</div>
</body>
</html>

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

How can I force a newline in a layout grid if an element's text content is too long?

html

css

display