CSS przepełnienie opakowania
Przykład 01: Normalne opakowanie
W naszym pierwszym przykładzie będziemy omawiać użycie normalnego opakowania z różnymi stylami pisania. Używamy więc kodu Visual Studio do utworzenia nowego pliku HTML o nazwie „Test.html ”i uruchom w nim skrypt HTML. Kod HTML został uruchomiony od głównego znacznika HTML, a następnie głównej głowy i tagów nadwozia. W obrębie znacznika ciała używamy dwóch pierwszych nagłówków o różnych rozmiarach. Nagłówek 1 jest największy podczas nagłówka 2 to drugi co do wielkości pokazuje, że byłoby to normalne opakowanie.
Po tym nagłówku używamy znacznika „div” do utworzenia nowej sekcji na głównej stronie internetowej HTML. Ten znacznik „div” został określony w klasie „D1”, która ma być zróżnicowana po stylizacji. Dodaliśmy do niej linię tekstową lub akapit, aby owinąć ją w normalnym stylu opakowania. Ten tekst jest prosty i nie zawiera w nim żadnych długich słów. Po tym znaczniku „div” używamy drugiego nagłówka tej strony HTML, aby wyświetlić, że następny tekst DIV będzie również zawierał normalne opakowanie. Następnie mamy nowy znacznik „div” określony przez klasę „D2” do różnicowania w stylizacji.
Ta sekcja „div” zawiera długi tekst lub akapit wraz z jednym długim słowem, abyśmy mogli zobaczyć, jak reaguje normalna właściwość przepełnienia. Po tej sekcji nadwozie zostało zakończone, a znacznik ciała zostanie zamknięty wraz z głównym znacznikiem „HTML”. W tagu „Head” tego kodu HTML mamy tag stylowy, aby stylizować stronę HTML. Słowo kluczowe „Div” zostało użyte do stylizowania zarówno sekcji „Div” do 100 pikseli z granicą 3 pikseli koloru „Blue Violet” dla każdego. W tym celu zastosowano tutaj szerokość i własność graniczną. Następnie obie sekcje DIV zostały zaprojektowane osobno przy użyciu ich klasy. Owinęliśmy oba normalnym opakowaniem za pomocą właściwości „przepełnienie”. Stylizacja została zakończona. Tak więc styl i znacznik głowy są tutaj zamknięte. Nasz skrypt HTML został zakończony i jest gotowy do użycia. W ten sposób zapisaliśmy go i próbowaliśmy uruchomić w kodzie VS.
Korzystamy z menu „Uruchom” z kodu Visual Studio, a następnie opcji „Rozpocznij debugowanie”. Poprosił o wybranie chromu przeglądarki z listy. Wykonaliśmy go i mamy dane wyjściowe Pheld-Beelow dla dwóch sekcji „Div” zawierających normalne opakowanie na jego tekście. Pierwsza sekcja „Div” wyświetlała swój tekst w sortowanym i normalnym formacie, ponieważ nie zawiera bardzo długiego słowa, którego nie można zamontować w szerokości 100 pikseli.
Z drugiej strony drugie pole „Div” zawiera bardzo długie słowo w tekście. Stąd wyjście pokazuje, że słowo przekroczyło granicę 100-pikselowego pola „Div” jako użycie normalnego opakowania. Wynika to z faktu, że normalne opakowanie nie łamie słowa, aby pasowały do sekcji „Div”.
Przykład 02: Opakowanie w słowo
W tym przykładzie będziemy omawiać zastosowanie opakowania w słowach w porównaniu z normalnym opakowaniem. Używamy więc tego samego kodu HTML w narzędziu kodu Visual Studio, ale z kilkoma aktualizacjami. Więc zaczniemy jego wyjaśnienie od znacznika „ciała”. Zaktualizowaliśmy zarówno dane tekstowe „Div” o długie zdanie zawierające jedno długie słowo. Nagłówek 1 byłby określony jako normalne opakowanie, podczas gdy drugi nagłówek rozmiaru 1 jest określony jako opakowanie „łamania słowa”.
Zaktualizowaliśmy tekst sekcji „Div” zarówno dla sekcji „Div” osobno. Ciało jest teraz kompletne i będziemy patrzeć na stylistykę. Ta sama szerokość i własność graniczna zostały wykorzystane zarówno do sekcji „DIV”, jak i ich klasy zostały wykorzystane do ich oddzielnej stylizacji. Określaliśmy normalne opakowanie dla pierwszej sekcji „Div”, podczas gdy „łamanie słowa” dla drugiej sekcji „Div”. Zapisaliśmy ten kod.
Po uruchomieniu tego zaktualizowanego kodu w przeglądarce mamy wyjście Phise. Pierwszy tekst sekcji „Div” przekracza granicę bez łamania słowa, podczas gdy drugi tekst sekcji „Div” ma długie słowo, które zostało złamane i przeniesione do następnego wiersza, aby pasować do panelu „Div”. Odbywa się to poprzez użycie opakowania w słowach do stylizacji.
Przykład 03: w dowolnym miejscu
W tym przykładzie będziemy wyjaśniać użycie właściwości przepełnienia, aby zastosować opakowanie „w dowolnym miejscu” na nasze „dane” i porównać go z opakowaniem z łamaniem słów. Tak więc w obrębie znacznika naszego kodu HTML zaktualizowaliśmy jego nagłówki. Pierwszy nagłówek rozmiaru 1 został określony jako opakowanie z łamliwością, podczas gdy drugi nagłówek tego samego rozmiaru jest określony jako „Opakowanie w dowolnym miejscu”. Oba znaczniki „div” zawierają tekst zaktualizowanego długiego zdania zawierającego w nim co najmniej 1 długie słowo. Oba zdania w znacznikach „Div” są osobno aktualizowane o łamanie słów i wszędzie owijane osobno.
W obrębie stylu znów używamy szerokości 100 pikseli dla obu znaczników zawierających granicę solidnego koloru „niebieskiego fioletu”. Następnie używamy klas obu tagów osobno, aby odpowiednio je stylizować: D1 i D2. Właściwość przepełnienia przepełnienia została użyta zarówno dla „Div” osobno, aby stylizować pierwsze div z opakowaniem „Break-Word”, jak i drugie „Div” z opakowaniem „Anywhere”. Zapiszmy teraz i uruchommy ten kod teraz.
Wyjście tego zaktualizowanego kodu wykazało niewielką zmianę stylizacji obu sekcji „Div”. Łamanie słów i gdziekolwiek jest takie same.
Wniosek
Chodzi o stylizację różnych elementów pliku HTML z właściwością „przepełnienie”, aby uniknąć przepełnienia różnych tekstów string. Widzieliśmy trzy bardzo proste, ale przydatne przykłady HTML osobno obejmujące normalne opakowanie, opakowanie w słowach i opakowanie w dowolnym miejscu. Oprócz tego omówiliśmy również ich porównania.