nowrap

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

Benodigde stappen:

1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
2. Voeg de class nowrap aan het gewenste element.

Toelichting: Door de class op een specifieker 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. Verschillende voorbeelden en opties zijn beschikbaar op de Test- en voorbeelden-pagina.

Voorbeelden

Basis

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:

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>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via npm

CSS-voorbeeld:

@use "@minvws/manon/nowrap";

Instelbare variabelen

Dit element heeft zelf geen instelbare variabelen.

Gerelateerde pagina's