我们正在使用 xml/xslt/css 和 pdfreactor 打印医疗报告。因此，我们需要以单位为单位的精确位置。
报告是一个表格，一些标题应该在每一页上重复(红色)。 在表第 2 行 (=Analysis2) 中，Result 列中的字段太长而无法容纳该列，我想像表第 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>最佳答案
我建议也使用真实的表格，但您可以在您的 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>关于html - 如果元素的文本内容太长，如何在布局网格中强制换行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55065311/