PRAKTYCZNE PORADNIKI · Internet i kody
Spacje i wcięcia HTML: co sprawdzić po formatowaniu
Dowiedz się, które białe znaki mogą zmienić wygląd strony i co sprawdzić po sformatowaniu kodu HTML.
Autor Puffinmint · Aktualizacja
Dlaczego spacje między tagami mają znaczenie
Wcięcia ułatwiają czytanie kodu, ale węzły tekstowe należą do dokumentu. Spacje między elementami inline mogą rozdzielać słowa i obrazy.
Formatuj kopię, zachowując tekst
Pracuj na kopii HTML. Atrybuty oraz pre, script, style, textarea i title zostają zachowane; zmieniają się białe znaki między blokami. Narzędzie nie konwertuje JSX ani nie waliduje dokumentu.
-
Dane wejściowe
<div><p>A <strong>B</strong> C</p></div> -
Kolejne kroki
Wybierz i zastosuj metodę
-
Wynik
<div> <p>A <strong>B</strong> C</p> </div>
WYPRÓBUJ TEN KROK
Formatowanie HTML online
Pracuj w tym poradniku: wczytaj przykład, uruchom narzędzie i zmień dane, aby porównać wyniki. Drugi eksperyment sprawdza inny przypadek.
Przykład do samodzielnego odtworzenia
W zdaniu z elementem strong otaczające spacje rozdzielają słowa, więc je zachowaj. W pre nie zmieniaj nowych linii i początkowych spacji, nawet przy wcięciu kontenera.
Zachowaj spację nierozdzielającą
Drugi przykład zawiera U+00A0 między dwoma div. Po formatowaniu i skopiowaniu ta spacja musi pozostać. Narzędzie nie pokazuje podglądu HTML i nie wykonuje skryptów.
Wynik
Wprowadź dane, aby zobaczyć wynik.
Spacje inline i zawartość pre
W zdaniu z elementem strong otaczające spacje rozdzielają słowa, więc je zachowaj. W pre nie zmieniaj nowych linii i początkowych spacji, nawet przy wcięciu kontenera.
Przykład zastosowania
- Dane wejściowe
<div><p>A <strong>B</strong> C</p></div>- Wynik
<div> <p>A <strong>B</strong> C</p> </div>
Sprawdź kod w projekcie
Sprawdź wynik z CSS projektu, szczególnie white-space, oraz testami szablonu. Formatowanie nie dowodzi poprawnego zagnieżdżenia. Narzędzie pokazuje tekst i nie uruchamia HTML ani skryptów.
To dane przykładowe, nie pomiary rzeczywistego przypadku. Wynik korzysta z tego samego silnika co pełne narzędzie. Porównaj go z krokami obliczeń i zaznacz kontrole po sprawdzeniu.
| Parametr | Wartość |
|---|---|
| Jakie ograniczenia ma to narzędzie? | Do 100 000 znaków i 10 000 tokenów. Tylko HTML, bez walidacji i JSX. Białe znaki między blokami mogą się zmienić. |
| Przetwarzanie i prywatność | Dane i wyniki są przetwarzane w przeglądarce i nie są wysyłane na serwer. Statystyki zbiorcze, jeśli są włączone, zapisują tylko narzędzie i status operacji, bez treści. |