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

css grid layout
flex item new row
grid-template-columns
flex-wrap
flex break to new row
flexbox
css grid force one row
css grid empty cell

We are printing medical reports with xml/xslt/css and pdfreactor. Therefore we need exact positions in units.

The report is a table and some headers should be repeated on each page (colored red). In table row 2 (=Analysis2) the field in column Result is too long to fit the column and I would like to have a new line with css (or javascript?) like in table row 3 (Analysis3, I prepared this row so that it looks like my expectation). Results are too important in a medical report and should not be wrapped. Borders are not relevant.

@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>

I suggest using real tables too, but you can use word-break: break-all; in your css.

I put it in the body as example, but I wouldn't recommend that since it breaks words on any place.

@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>

Breaking to a new row with flexbox, Here's the challenge: if you want to create a flexbox layout with several Using an element to break to a new flex row comes with an interesting flex layout and rely completely on the line breaks to define the flow of our grid. This article was updated on 23rd March, 2017. Specifically: browser support for CSS Grid Layout. In this article, we are going to learn seven ways in which you can place elements in a web page

Here's a sample of what an actual table might look like.

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>

Line-based placement with CSS Grid, In the article covering the basic concepts of grid layout, we started to look at how to Inside our grid container I have four child elements. If we� - In my course, Foundations of Layout and Composition…we covered the anatomy of a grid,…but it never hurts to recap the information.…There are multiple types of grids.…Column based, modular, complex,…symmetrical, and asymmetrical.…But they all share some common elements.…Margins, columns, gutters, hanglines, and markers.…When I design a grid, I work with points and picas

Problem solved.

@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>

Auto-placement in CSS Grid Layout, A grid can contain a mixture of items. Some of the items may have a position on the grid, but others may be� In the previous guide we looked at grid lines, and how to position items against those lines. When you use CSS Grid Layout you always have lines, and this can be a straightforward way to place items on your grid. However, there is an alternate method to use for positioning items on the grid which you can use alone or in combination with line-based placement. This method involves placing our

How to force a new line in css, Line break in CSS is done by specifying a display style of element as block, our flex layout and rely completely on the line breaks to define the flow of our grid. Exploiting table layout. My favorite idea came from Thierry Koblentz. Just make the span display: table; and you’re done. It’s not tabular data of course, but that doesn’t matter. The fact you can force table layout from CSS is all about exploiting the unique layout properties of table layout — not semantics. h1 span { display: table; }

Grid system � Bootstrap, Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes to a new line in flexbox requires a small hack: add an element with width: 100 % Force next columns to break to new line --> <div class="w-100"></div> <div� The following example defines a parent Grid element (grid1) that has three columns and three rows. A child Rectangle element (rect1) is added to the Grid in column position zero, row position zero. Button elements represent methods that can be called to reposition the Rectangle element within the Grid. When a user clicks a button, the related

Css multi line span, Jan 11, 2019 � In all of the excitement about CSS Grid Layout and Flexbox, the first span as a block element, forcing the second span to begin on a new line. Creates a grid layout with the specified number of rows and columns. All components in the layout are given equal size. One, but not both, of rows and cols can be zero, which means that any number of objects can be placed in a row or in a column. GridLayout(int rows, int cols, int hgap, int vgap)

Comments
  • That isn't a table. Why are you not using one? It might simplify things.
  • I'm actually confused about the request. The sentence beginning with "Analysis2" wraps nicely, and the next one isn't log enough to wrap anyway. What's the problem?
  • I agree with @isherwood this is tabular data that you're turning into a table with CSS when you could use an actual table with tr and td and nothing would be able to break out of it.
  • Wait, are you asking how to drop the value in one cell to the next line if the value in the previous cell overflows into it? Das ist ein bisschen seltsam.
  • You haven't addressed my first question. If you used a table your column widths would flow more appropriately. Is that an option?
  • I'm afraid that's not a solution, because results must not be wrapped in a medical report.