jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS- en ontwerptools

Gratis CSS text-indent hanging/each-line Builder

Genereer CSS text-indent met hanging- en each-line-sleutelwoorden voor hangende inspringing en regeleinde-inspringing.

Tool laden...

Wat is CSS text-indent hanging/each-line Builder?

CSS text-indent ondersteunt nu de hanging en each-line keywords (Baseline 2026: Chrome 130+, Safari 18.2+, Firefox 135+). hanging keert de richting van de inspringing om: de eerste regel blijft links uitgelijnd en alle volgende regels worden ingesprongen met de opgegeven lengte. each-line past inspringing toe na elke gedwongen regeleinde (zoals <br>), niet alleen de eerste regel. U kunt beide keywords combineren met een lengtewaarde: text-indent: 2em hanging each-line cre毛ert een hangende inspringing die ook na elk regeleinde opnieuw begint.

Snel antwoord

Gebruik text-indent: 2em hanging om een hangende inspringing te maken waarbij de eerste regel links uitgelijnd blijft en volgende regels 2em worden ingesprongen. Voeg each-line toe om de inspringing ook na elk gedwongen regeleinde toe te passen. Browserondersteuning: Chrome 130+, Safari 18.2+, Firefox 135+ (Baseline 2026). De tool genereert een fallback voor oudere browsers die de keywords negeren en een normale eerste-regel-inspringing toepassen.

Last updated: 2026-06-01

Beperkingen

  • hanging en each-line vereisen Baseline 2026-browsers (Chrome 130+, Safari 18.2+, Firefox 135+). Oudere browsers negeren de keywords stilzwijgend en passen een standaard eerste-regel-inspringing toe —acceptabel voor progressieve verbetering, maar kan precieze lay-outvereisten breken.
  • each-line wordt alleen geactiveerd bij gedwongen regeleinden (<br>, <hr> of elementen met display: block in de tekst). Het wordt niet gereset na soft-wrapped regels in smalle containers. Als u inspringingscontrole per soft-wrapped regel nodig hebt, overweeg dan padding-left met een negatieve text-indent-workaround.
  • text-indent werkt niet op inline-elementen. Voor inline-level hangende inspringingen in gemengde inline/block-lay-outs, gebruik padding-left met de gewenste inspringingsbreedte en een negatieve text-indent op de bovenliggende blokcontainer.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Kies de inspringingslengte in em-, px- of rem-eenheden. 2em is de standaard voor bibliografie-hangende inspringingen.
  2. Schakel het hanging-keyword in om een omgekeerde inspringing te maken waarbij de eerste regel links uitgelijnd is en volgende regels worden ingesprongen.
  3. Schakel het each-line-keyword in om de inspringing toe te passen na elk gedwongen regeleinde (<br>) naast de eerste regel.
  4. Kopieer de gegenereerde CSS-declaratie inclusief de fallback voor browsers zonder hanging- of each-line-ondersteuning.

Waarvoor je het kunt gebruiken

  • Formatteer bibliografie-items met een hangende inspringing waarbij de eerste regel links uitgelijnd is en volgende regels worden ingesprongen, overeenkomstig academische citatiestijlrichtlijnen.
  • Maak definitielijsten waarbij de term links uitgelijnd is en de definitietekst wordt ingesprongen, met hanging en each-line voor meerregelige definities met regeleinden.
  • Pas hangende interpunctie-effecten toe waarbij aanhalingstekens en bullets buiten de tekstmarge vallen voor een verzorgde typografische uitstraling.

Gebruik

Praktische voorbeelden

Voorbeeld

Bibliografie met hangende inspringing

Een onderzoekspaper-bibliografie vereist dat elk item een hangende inspringing heeft: de eerste regel (auteursnaam) is links uitgelijnd en de vervolgregels (titel, uitgever) worden 2em ingesprongen. Gebruik text-indent: 2em hanging. De browser springt automatisch alle regels na de eerste in, wat voldoet aan de eisen van Chicago- en APA-stijl.

Voorbeeld

Definitielijst met each-line

Een woordenboeksite gebruikt <br> in definitieparagrafen om gebruiksnotities te scheiden van de hoofddefinitie. Met text-indent: 2em hanging each-line krijgt de eerste regel van elk <br>-gescheiden segment de omgekeerde inspringingsbehandeling. Elk nieuw segment na een regeleinde reset de inspringing, waardoor elke definitiesectie visueel gescheiden blijft.

Veelgemaakte fouten

  • Hanging gebruiken zonder een lengtewaarde —hanging is een keyword-modifier, geen lengte. U moet altijd eerst een lengtewaarde specificeren, zoals text-indent: 2em hanging. Zonder de lengte is de declaratie ongeldig en doet deze niets.
  • Aannemen dat each-line werkt met normale alineaomloop —each-line geldt alleen na gedwongen regeleinden (<br> of vergelijkbaar). Het reset de inspringing niet na elke soft-wrapped regel. Gebruik voor per-regel-controle een andere benadering zoals padding-left met negatieve text-indent.
  • Hanging combineren met een negatieve text-indent-waarde —hanging keert de inspringingsrichting al om. Het gebruik van een negatieve waarde met hanging geeft onverwachte resultaten. Gebruik positieve lengtewaarden met hanging voor voorspelbaar gedrag.

Verificatie

  1. Inspecteer een opgemaakt element in Chrome DevTools en controleer of de berekende text-indent-waarde zowel het lengte- als keywordgedeelte bevat. Controleer of de eerste weergegeven regel links uitgelijnd is en alle volgende regels met de opgegeven lengte zijn ingesprongen.
  2. Test in Firefox 135+ of Safari 18.2+ en vergelijk de weergave met Chrome 130+. De hangende inspringing moet in alle drie de engines identiek verschijnen. Test vervolgens in een browser zonder hanging-ondersteuning (zoals een oudere Chrome-versie) om te bevestigen dat de fallback een standaard eerste-regel-inspringing produceert.

FAQ

Vragen over CSS text-indent hanging/each-line Builder

Welke browsers ondersteunen text-indent met hanging en each-line keywords?

Zowel hanging als each-line zijn Baseline 2026-functies. Chrome 130+, Safari 18.2+ en Firefox 135+ ondersteunen beide keywords. In oudere browsers negeert de browser de keywords en past een normale eerste-regel-inspringing toe. De tool genereert een fallback-declaratie zodat uw lay-out elegant degradeert.

Kan ik hanging gebruiken met elke eenheid voor de inspringingslengte?

Ja. hanging en each-line werken met elke CSS-lengte-eenheid: em, rem, px, ch, ex, cm en zelfs percentages. em is het meest gebruikelijk voor typografische inspringingen omdat het meeschaalt met de lettergrootte. Percentagewaarden zijn relatief aan de breedte van het bevattende blok en geven inconsistente resultaten over viewports —blijf bij em of rem voor voorspelbare hangende inspringingen.

Be茂nvloedt hanging inline-elementen of alleen blokcontainers?

text-indent is alleen van toepassing op blokcontainers (inclusief flex-items en grid-items met display: block). Het heeft geen effect op inline-elementen. Gebruik voor inline- of inline-block-elementen padding-left met een negatieve margin-left-benadering om een hangende inspringing te simuleren.

Reset each-line ook de hangende inspringing aan het begin van elke alinea?

hanging en each-line zijn onafhankelijke keywords die u kunt combineren. hanging bepaalt welke regels de inspringing krijgen (eerste regel uitgelijnd, rest ingesprongen). each-line bepaalt waar de inspringing wordt gereset (na elke <br>). Samen gebruikt —text-indent: 2em hanging each-line —krijgt u een hangende inspringing die opnieuw start na elk gedwongen regeleinde. Elke nieuwe alinea begint hoe dan ook fris.

Gerelateerde tools

Meer css- en ontwerptools

CSS- en ontwerptools

CSS-carrouselgenerator

Genereer native CSS-carrouselmarkup met scroll-snap, scrollknoppen, scrollmarkeringen en een toegankelijke lijststructuur. Geen JavaScript nodig.

Open tool

CSS- en ontwerptools

CSS Scroll-State-querygenerator

Genereer CSS scroll-state()-containerqueries om gesnapte, vastgezette of scrollbare elementen te stylen. Inclusief JavaScript-fallback voor ondersteuning in andere browsers.

Open tool

Probeer ook

Probeer ook