Word CSS Wrap
W tym samouczku przedstawimy pełne wskazówki dotyczące tej właściwości „Word-Wrap” i wykonamy przykłady, w których użyjemy właściwości CSS „Word-Wrap”.
Przykład 1:
Rozpoczniemy nasz kod i uruchomić go w kodzie Visual Studio. Zaczynamy od uruchomienia nowego pliku, a następnie wybieramy HTML jako język. Teraz wpisz „!”I naciśnij„ Enter.„Tutaj znajdziesz wszystkie podstawowe tagi HTML. W rezultacie nie będziemy musieli ręcznie dodawać wszystkich tych tagów. Po tym wszystkim po prostu wstawiamy nazwę pliku CSS w znaczniku „link” w „głowie”. Wkładamy dwa nagłówki w ciele i tworzymy div, w którym piszemy jedno długie słowo, abyśmy użyli właściwości „Word-Wrap” w CSS i pokażesz, jak to działa.
Dekoruje nagłówek, stosując „kolor” i ustawiając go na „czerwony” za pomocą właściwości „dekoracja tekstu” i za pomocą słowa kluczowego „Podkreśń” dla tej właściwości. Stosujemy stylizację do tego nagłówka, aby był atrakcyjny. Udekorujemy również drugi nagłówek: „zielony” jako „kolor” i stosujemy „dekorację tekstu” i ustawiamy go na „Podkreśl”. Ustawiamy „szerokość” „div” jako „150px” i tworzymy wokół niej „granicę”. Ta granica dotyczy „3px” w swojej „szerokości” i jest typem „solidnym”, „czerwony” w „kolorze”.
Tutaj stosujemy właściwość „Word-Wrap” i ustawiamy ją na „normalne”, która jest również wartością „domyślną”. Nie złamie długiego słowa. Długie słowo pojawi się tak, jak jest napisane w kodzie HTML. Przekroczy granicę, którą stworzyliśmy dla Div, a długi tekst pozostaje taki sam, nie złamie tego słowa.
Wyjście pokazuje, że długie słowo pojawia się tak samo, jak piszemy w pliku HTML. Przecina granicę i pojawia się w jednej linii. Długie słowo nie jest tu złamane, ponieważ ustawia właściwość „Word-Wrap” na „normalny”, co jest takie samo jak „domyślne”.
Przykład nr 2:
Używamy tego samego kodu HTML, a teraz zastosujemy słowo kluczowe „Break-Word” jako wartość właściwości „Word-Wrap” w tym przykładzie.
„Kolor” dla nagłówku 1 „H1”, używamy „bordowego” i wykorzystujemy „dekorację tekstu” do podkreślenia tego nagłówka. W przypadku „H2” używamy „fioletowego” jako „h2” „kolor” i „podkreśla” również nagłówek. „Szerokość” kontenera „Div” to „160px” i zaprojektuje wokół niego granicę, wykorzystując właściwość „graniczną”. Ustawiliśmy „3px” na granicy Div „szerokość”, która jest „solidną” formą i „bordową” w kolorze. Tutaj jest właściwość „Word-Wrap”, w której używamy wartości „Break-Word”. Ta wartość złamie długie słowo zgodnie z określoną przestrzenią. Przyjrzymy się wyjściu i będziemy wiedzieć, jak długie słowo łamie się, wykorzystując tę właściwość.
Zwróć uwagę, w jaki sposób długie słowo jest złamane i regulowane w pojemniku Div. To długie słowo jest rozbite w tym wyjściu, ponieważ używamy wartości „łamania słowa” dla właściwości „Word-Wrap”.
Przykład nr 3:
Mamy dwa nagłówki „H1” i „H2”. Poniżej tych nagłówków mamy dwa różne Divy o nazwie „A” i „B”. Piszemy tekst w obu divach i umieszczamy długie słowo w każdym divie. Teraz tworzymy plik CSS, w którym będziemy korzystać z właściwości „Word-Wrap”.
Używamy właściwości „kolor” i definiujemy ją jako „zielony” do dekoracji nagłówka, a także właściwości „dekoracji tekstu” i słowa kluczowego „Podkreśl” tej właściwości „dekoracji tekstu”. Używamy również „Orange” jako „koloru” do następnego nagłówka i wdrażamy „dekorację tekstu” z „Podkreśl” jako ustawienie. Ustawiamy „szerokość” „Div” jako „180px”, który ustawi tę szerokość dla obu Divów, ponieważ nie wspominamy o nazwie żadnej div tutaj. Korzystamy również z nieruchomości „granic”, która dotyczy również obu Divów. „Szerokość” granicy dla obu Divs to „3px”, typ „solidny” i „niebieski” jest ustawiony dla „koloru” granicy.
Wymieniamy imię pierwszego div, który jest „div. a ”, a następnie zastosowano atrybut„ Word-Wrap ”. Wartość jest ustawiona na „normalne”, co jest również wartością „domyślną”. Długie słowo nie jest złamane dla tego div. Długie słowo będzie wyświetlane dokładnie tak, jak jest wpisane w kodzie HTML. Teraz mamy drugi div, który jest „div. B". W tym celu wykorzystujemy właściwość „Word-Wrap” i używana jest wartość „łamania słowa”. Długie słowo zostanie złamane zgodnie z dostarczoną przestrzenią z tą wartością. Wykorzystując tę właściwość i wartość, będziemy mogli zobaczyć, jak długie słowo dzieli się na wyjściu.
Długie słowo pierwszej div nie jest złamane, ponieważ używamy „normalnego” jako wartości „Word-Wrap” dla „Div. A". Ale w drugim div widać, że długie słowo jest również dostosowywane w określonej przestrzeni. To długie słowo, które jest obecne w drugim div, jest złamane. Wynika to z użycia wartości „łamania słowa” właściwości „Word-Wrap”.
Przykład nr 4:
Tworzymy nagłówki dla tego przykładu i umieszczamy dwa akapity z różnymi nazwami klas jako „par” dla pierwszego akapitu i „par1” dla drugiego akapitu. W obu akapitach umieścimy również długie słowo i użyjemy właściwości „Word-Wrap” w CSS.
„Kolor” nagłówka jest ustawiony w formie RGB. Jego wartość to „RGB (112, 6, 6)”, który jest cieniem „bordowy”. Używamy również „algierskiej” rodziny czcionki do „H1”. Ustaliliśmy także „rodzinę czcionki” „H2” jako „Times New Roman”. „Kolor” H2 jest „niebieski” i stylizuje go jako „kursywa”, aby był atrakcyjny.
Teraz przychodzi „par”, który definiuje pierwszy akapit. „Szerokość”, którą tutaj definiujemy, to „200px” i ustawiamy jego „kolor tła” jako „jasnoniebieski”. Chcemy również utworzyć do tego granicę, dlatego używamy „granicy” i ustawiamy ją na „2px solid czarny”. Opisana przez nas „wyściółka” to „10px”, a rozmiar tekstu akapitu to „20px” dla „par”. Nie używamy właściwości „Word-Wrap” do tego akapitu.
Następnie mamy kolejny akapit o nazwie „P1”. Zdefiniowaliśmy „szerokość” jako „11em” i „kolor tła” jako „jasnoniebieski”. Będziemy również potrzebować granicy, więc używamy „granicy” i konfigurujemy ją do „2px Solid Black.„Padding”, o której mówimy, to „10px”. Korzystamy z właściwości „Word-Wrap” i ustawiamy ją na „łamanie słów”, które omówiliśmy w naszych poprzednich kodach, a rozmiar tekstu akapitu to „20px” dla „PAR1”.
Tutaj długie słowo pierwszego akapit. Ale używamy „Word-Wrap: Break-Word” dla drugiego akapitu, więc długie słowo akapitu jest złamane.
Wniosek:
Celem tego samouczka jest nauczenie, jak używać właściwości CSS „Word-Wrap”. W tym samouczku spojrzeliśmy na właściwość CSS „Word-Wrap” i opisaliśmy, co to jest, jak jej używać i jak to działa. Wyjaśniliśmy, że ta właściwość łamie długie słowo i dostosowuje to długie słowo w określonej przestrzeni. Pokazaliśmy również przykłady korzystania z tej właściwości „Word-Wrap”, a także wyników wszystkich przykładów.