nowrap

Zorgt ervoor dat woorden en teksten niet afgebroken worden maar op dezelfde regel blijven doorlopen.

Benodigde stappen:

  1. Voeg de class nowrap toe aan het gewenste element.

Tip: Door de class op een specifiek element te plaatsen, bijvoorbeeld een td zal het effect beperkt blijven tot het specifieke element. Door de class op een hoger gelegen element te plaatsen, bijvoorbeeld de table of de omliggende div zullen alle onderliggende tekst-elementen niet afbreken.

Voorbeelden

Nowrap op een paragraaf

Toelichting: In dit voorbeeld wordt er ook gebruik gemaakt van de helper-class horizontal-scroll om te voorkomen dat het voorbeeld-element de layout van de pagina breekt. Zonder deze toevoeging zou de tekst het scherm uitlopen. De class horizontal-scroll voegt op de maximale beschikbare breedte de scrollbalk toe.

Visueel voorbeeld:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Html-voorbeeld

                
<p class="nowrap horizontal-scroll">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

Tabel met nowrap

Visueel voorbeeld:

Basisvoorbeeld tabel met "nowrap":
Table header heading 1 Table header heading 2 Table header heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ipsum Dolor set
Lorem Ipsum Dolor set
Lorem Ipsum Dolor set
Lorem Ipsum Dolor set

Html-voorbeeld

                
<div class="horizontal-scroll">
  <table class="nowrap">
    <caption>Basisvoorbeeld tabel met "nowrap":</caption>
    <thead>
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
    </tbody>
  </table>
</div>

nowrap op omliggende div van een table

Visueel voorbeeld:

Basisvoorbeeld tabel:
Table header heading 1 Table header heading 2 Table header heading 3 Table header heading 4 Table header heading 5 Table header heading 6 Table header heading 7 Table header heading 8 Table header heading 9 Table header heading 10
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set

Html-voorbeeld:

                
<div class="horizontal-scroll nowrap">
  <table>
    <caption>Basisvoorbeeld tabel:</caption>
    <thead>
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
        <th scope="col">Table header heading 4</th>
        <th scope="col">Table header heading 5</th>
        <th scope="col">Table header heading 6</th>
        <th scope="col">Table header heading 7</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
    </tbody>
  </table>
</div>

nowrap op thead

Visueel voorbeeld:

Basisvoorbeeld tabel:
Table header heading 1 Table header heading 2 Table header heading 3 Table header heading 4 Table header heading 5 Table header heading 6 Table header heading 7 Table header heading 8 Table header heading 9 Table header heading 10
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at mattis nunc. Sed metus massa, tristique quis purus et, pulvinar ornare est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set

Html-voorbeeld:

                
<div class="horizontal-scroll">
  <table class="nowrap">
    <caption>Basisvoorbeeld tabel:</caption>
    <thead class="nowrap">
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
        <th scope="col">Table header heading 4</th>
        <th scope="col">Table header heading 5</th>
        <th scope="col">Table header heading 6</th>
        <th scope="col">Table header heading 7</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at mattis nunc. Sed metus massa, tristique quis purus et, pulvinar ornare est. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
    </tbody>
  </table>
</div>

nowrap op tbody

Visueel voorbeeld:

Basisvoorbeeld tabel:
Table header heading 1 Table header heading 2 Table header heading 3 Table header heading 4 Table header heading 5 Table header heading 6 Table header heading 7 Table header heading 8 Table header heading 9 Table header heading 10
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at mattis nunc. Sed metus massa, tristique quis purus et, pulvinar ornare est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set

Html-voorbeeld:

                
<div class="horizontal-scroll">
  <table class="nowrap">
    <caption>Basisvoorbeeld tabel:</caption>
    <thead>
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
        <th scope="col">Table header heading 4</th>
        <th scope="col">Table header heading 5</th>
        <th scope="col">Table header heading 6</th>
        <th scope="col">Table header heading 7</th>
      </tr>
    </thead>
    <tbody class="nowrap">
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at mattis nunc. Sed metus massa, tristique quis purus et, pulvinar ornare est. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
    </tbody>
  </table>
</div>

nowrap op een tr

Visueel voorbeeld:

Basisvoorbeeld tabel:
Table header heading 1 Table header heading 2 Table header heading 3 Table header heading 4 Table header heading 5 Table header heading 6 Table header heading 7 Table header heading 8 Table header heading 9 Table header heading 10
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at mattis nunc. Sed metus massa, tristique quis purus et, pulvinar ornare est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set

Html-voorbeeld:

                
<div class="horizontal-scroll">
  <table class="nowrap">
    <caption>Basisvoorbeeld tabel:</caption>
    <thead>
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
        <th scope="col">Table header heading 4</th>
        <th scope="col">Table header heading 5</th>
        <th scope="col">Table header heading 6</th>
        <th scope="col">Table header heading 7</th>
      </tr>
    </thead>
    <tbody>
      <tr  class="nowrap">
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at mattis nunc. Sed metus massa, tristique quis purus et, pulvinar ornare est. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
    </tbody>
  </table>
</div>

nowrap op een td

Visueel voorbeeld:

Basisvoorbeeld tabel:
Table header heading 1 Table header heading 2 Table header heading 3 Table header heading 4 Table header heading 5 Table header heading 6 Table header heading 7 Table header heading 8 Table header heading 9 Table header heading 10
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at mattis Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set
Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set Dolor set

Html-voorbeeld:

                
<div class="horizontal-scroll">
  <table>
    <caption>
      Basisvoorbeeld tabel:
    </caption>
    <thead>
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
        <th scope="col">Table header heading 4</th>
        <th scope="col">Table header heading 5</th>
        <th scope="col">Table header heading 6</th>
        <th scope="col">Table header heading 7</th>
        <th scope="col">Table header heading 8</th>
        <th scope="col">Table header heading 9</th>
        <th scope="col">Table header heading 10</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="nowrap">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at mattis.
        </td>
        <td class="nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at mattis</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
        <td>Dolor set</td>
      </tr>
    </tbody>
  </table>
</div>
Terug naar het hoofdmenu