CSS to kaskadowy arkusz stylu, który zapewnia różne właściwości elementom HTML do celów stylizacji. Istnieją setki nieruchomości, takich jak wybór tekstu, granica, margines, wyściółka, szerokość, wysokość i więcej. Pisząc duży akapit w HTML, między tekstem może istnieć niechciana przestrzeń. W takim scenariuszu użyj CSS ”Biała przestrzeń„Właściwość do kontrolowania białych przestrzeni w tekście.

W tym podręczniku właściwość CSS białej przestrzeni zostanie omówiona z przykładami. A więc zacznijmy!

Co to jest właściwość CSS białej przestrzeni?

CSS „Biała przestrzeń„Właściwość obsługuje białe przestrzenie wewnątrz elementu.

Składnia

Składnia właściwości białej przestrzeni jest wspomniana poniżej. Możesz przypisać jedną wartość zgodnie ze swoimi preferencjami:

Biała przestrzeń: nowrap | Pre-Wrap | Normal | Początkowy | dziedziczy | Pre | Pre-line;

Zanim wpadniemy w dyskusję, dowiedzmy się o powiązanych wartościach z tą właściwością jeden po drugim!

Biała przestrzeń: Nowrap

Właściwość białej przestrzeni o wartości ”nowrap„Zawraca białe przestrzenie w jedną linię. Eliminuje to linię pęka w źródle i nigdy nie obejmuje tekstu. Ponadto tekst trwa aż do wystąpienia
etykietka.

Przykład

Przejdźmy do praktycznego przykładu, w którym napiszmy niektóre akapity. Są one następnie stosowane z właściwością białej przestrzeni z różnymi wartościami i zobacz ich wyniki.

Html

W obrębie elementu ciała pliku HTML:

• Dodaj div z nazwą klasy „pojemnik".
• Następnie dodaj

  tag i

  tag z klasą o nazwie „nagłówek".

• Potem a

  Tag jest umieszczony w celu dodania akapitu na stronie internetowej.

Notatka: Aby sprawdzić działanie różnych wartości właściwości białej przestrzeni, umieściliśmy białe przestrzenie w akapicie:

Właściwość białej przestrzeni

Biała przestrzeń: nowrap:

Jesteśmy drużyną. Pracujemy razem dla wspólnej misji. Jesteśmy drużyną.
Pracujemy razem dla wspólnej misji. Jesteśmy drużyną.

Wewnątrz znacznika HTML, dodaj tag.

CSS

ciało
kolor tła: #A9B6EB;

„„kolor tła„Właściwość jest wykorzystywana do ustawienia koloru tła elementu ciała.

Styl „kontener” div

.pojemnik
Wysokość: 200px;
Kolor: RGB (19, 1, 56);

Oto opis danego kodu:

• ".pojemnik”Wskazuje kontener klasy DIV, w którym„.„Znak jest określany jako selektor klasowy.
• "wysokość”Właściwość ustawia wysokość elementu na 200px.
• "kolor„Właściwość określa kolor czcionki.

Stylowa klasa „nagłówka”

.nagłówek
Text-Align: Center;

Następnie dodaj pewne właściwości stylu do nagłówków H1 i H2, które zostały wyjaśnione poniżej:

• ".nagłówek”Jest wykorzystywany do dostępu do klasy

  I

  elementy.

• "tekst-align„Właściwość z ustawioną wartością jako„Centrum„Wyśrodkowuje tekst.

Stylowa klasa „A”

.A
Biała przestrzeń: nowrap;

• ".A”Odnosi się do klasy akapitu.
• "Biała przestrzeń„Właściwość z ustawioną wartością jako„nowrap„Zakocha wszystkie białe przestrzenie.

Jak widać na podanym poniżej ekranie wyjściowym. Wartość nowap zwinęła wszystkie białe przestrzenie z akapitu, a tekst wcale nie jest owinięty:

Biała przestrzeń: normalna

Jest to domyślna wartość właściwości białej przestrzeni. Wpada białe przestrzenie w jedną znak i w razie potrzeby obejmuje tekst do następnego wiersza.

Składnia

W CSS przypisz wartość „normalna„Do właściwości białej przestrzeni:

Biała przestrzeń: normalna;

Można zauważyć, że białe przestrzenie są zawalane, a tekst jest owinięty. Linie są przełomowe, aby wypełnić poniższą przestrzeń:

Biała przestrzeń: Pre

Sekwencja kosmiczna jest zachowana, a linie są rozbite, gdy nowa postać jest spełniona lub włączona
. Mówiąc dokładniej, „przed„Wartość zachowuje zarówno przerwy w linii, jak i przestrzenie.

Składnia

Aby go wykorzystać, przypisz wartość właściwości preparatów do właściwości białej przestrzeni, jak wspomniano poniżej:

Biała przestrzeń: PRE;

Wyjście

Biała przestrzeń: wstępna linia

Podczas korzystania z „wstępnie linia„Białe przestrzenie są zawalone, a linie są rozbite w nowościach, o godz
etykietka. Ponadto obejmuje również tekst,

Składnia

W CSS właściwość białej przestrzeni otrzyma wartość, jak wspomniano poniżej:

Biała przestrzeń: wstępna linia;

Ustawiając wartość wstępną na właściwości białej przestrzeni, wynik będzie wyglądał tak:

Biała przestrzeń: dziedzictwo

Wartość "dziedziczyć”Wskazuje, że ta właściwość powinna odziedziczyć wartość z elementu nadrzędnego.

Składnia

Oto składnia do określenia wartości właściwości białej przestrzeni jako dziedziczenia:

Biała przestrzeń: dziedzictwo;

Powyższy kod pojawi się, jak pokazano na poniższym obrazku:

Biała przestrzeń: przedplątanie

„„Wcześniejsze„Wartość zachowuje przestrzenie, zakładki i Newline. Owija również tekst.

Składnia

Biała przestrzeń: przedplamiona;

Wyjście

Biała przestrzeń: początkowa

"wstępny”Wskazuje, że właściwość CSS ma być ustawiona na wartość domyślną. Wartość tę można przypisać do właściwości białej przestrzeni w następujący sposób:

Biała przestrzeń: początkowa;

Wyjście

Bonusowa wskazówka

W CSS istnieją inne wartości właściwości białej przestrzeni, które można dalej zbadać:

• Biała przestrzeń: Revert
• Biała przestrzeń: warstwa revert
• Biała przestrzeń: białe przestrzenie
• Biała przestrzeń: Unset

Nauczyliśmy się różnych wartości nieruchomości w białej przestrzeni i ich użyciu.

Wniosek

W CSS „Biała przestrzeń„Właściwość określa, jak radzić sobie z białymi przestrzeniami w elemencie. Na przykład czasami kod źródłowy dokumentu jest napisany w sposób, który nie jest do ostatecznego renderowania. Potrzebuje wcięcia i przestrzeni. Aby odpowiednio je ustawić, CSS pozwala nam korzystać z właściwości białej przestrzeni o różnych wartościach. W tym artykule wyjaśniliśmy wartości właściwości białej przestrzeni i ich zachowanie z przykładami.