Arkusz stylów kaskadowych (CSS) oferuje właściwość do wyświetlania wszystkich elementów HTML bez przerwy, lub możesz powiedzieć, że cała zawartość HTML jest wyświetlana na jednej linii. HTML i CSS przyczyniają się do osiągnięcia tego zjawiska na stronie internetowej. Podstawową zaletą tego jest to, że zawartość HTML zajmie mniej miejsca po ich wyświetleniu. To również wyrównuje zawartość.

Nie ma żadnej wbudowanej funkcji w CSS, takiej jak inne efekty, na przykład dekoracja tekstu, typ stylu listy itp. Ale musimy zastosować ten efekt przerwy bez linii, używając właściwości wyświetlania, która jest ceniona jako właściwość bloków wbudowanych.

Aby wdrożyć efekt nieruchomości CSS No-Line Break, musisz znać podstawy HTML i CSS. Użyjemy edytora tekstu dla kodu i przeglądarki do zaimplementowania kodu w edytorze. Rozwińmy właściwość CSS z blokiem inline i jego wpływem na zjawisko „No Line Break”.

Własność CSS Inline Block

Ta właściwość służy do wyświetlania elementu w pojemniku blokowym. W tym podejściu blok elementów jest przekształcany w element inline. W ten sposób zapobiega przerwy na linii. Składnia właściwości inline-block jest wyświetlana w następujący sposób:

Przedmiot
Wyświetlacz: Block Inline;

Wdrożymy tę właściwość na dwa sposoby: poprzez listę i div.

Przykład 1: Brak przerwy w listach

W pierwszym przykładzie zastosujemy koncepcję Break No-Line na liście. Lista to zawartość HTML, w której tekst jest reprezentowany pionowo wraz z pociskami, albo lista jest uporządkowana, albo nieuporządkowana. Kiedy mówimy o listach, zawsze wymyślamy widok posiadania każdego elementu listy w osobnej linii z przerwą linii. Ale czasami, zgodnie z scenariuszem, chcemy wyświetlić elementy listy bez pocisków w jednym wierszu. Odbywa się to poprzez wyświetlanie elementów listy za pomocą CSS z właściwością „No Line Break”. Rozpocznijmy kod HTML z sekcją ciała.

Użyliśmy dwóch nagłówków tekstu przez znaczniki nagłówka -

I

. Następnie lista nieopisana jest tworzona z 5 elementami w każdym rzędzie.

• Śieć komputerowa


• …

Ta sama składnia jest obserwowana dla 5 elementów do wprowadzenia w każdym rzędzie.

Potem Tag zamyka listę i podobnie zamyka również resztę tagów. Teraz rozważ tagi stylowe, ponieważ musimy zastosować właściwość wyświetlania na liście, aby każda lista była wyświetlana na jednym wierszu.

Li
Wyświetlacz: Block Inline;

Używamy znacznika „Li” bezpośrednio w CSS, aby zastosować efekt blokowania wbudowanego na wszystkie elementy listy i zapobiegać wyświetlaniu na osobnej linii. Ponadto stosujemy kolor czcionki do obu nagłówków. To jest dodatkowy styl i nie jest obowiązkowy w użyciu.

W stylu nadwozia używamy koloru tła i koloru czcionki, aby dodać styl do strony internetowej, aby uczynić go użytkownikami estetyki. Kolejną ważną cechą, która służy do zastosowania właściwości wyświetlacza, jest wspomnienie szerokości ciała HTML, aby wyświetlić całą zawartość HTML w jednym wierszu.

Ciało
Szerokość: 60%;

Zapisz kod w pliku edytora tekstu z rozszerzeniem HTML, aby uczynić go ikoną przeglądarki, która przedstawia, że ​​jest to strona internetowa. Wykonaj go w przeglądarce. Oczekiwana strona internetowa ma listę wszystkich elementów w notacji pionowej, jeśli nie ma właściwości blokują.

Ale w wyniku tej właściwości wyświetlacza CSS widzimy, że wszystkie elementy na liście są wyświetlane w jednej linii poziomej bez pocisków. To już nie wygląda jak lista. Ale wygląda jak prosty akapit z domyślnymi przestrzeniami między słowami.

Przykład 2: Brak pęknięć linii w Div

Podobnie jak listy, gdy lista jest przekonwertowana na akapit, jesteśmy w stanie zastosować efekt wyświetlania na dowolnej innej zawartości HTML. Więc wybraliśmy div. Div to pojemnik, który zawiera drugą zawartość HTML. Po pierwsze, rozważ prosty tag DIV, w którym nie zastosowaliśmy żadnego efektu CSS „Brak przerwy w linii”. Ale Div jest dostarczany z podstawowymi stylami, takimi jak wyściółka i kolor, aby wyświetlić istnienie obu Div na stronie internetowej.

Div One

To samo dotyczy Div dwóch.

Zapisz kod i wykonaj go w przeglądarce. Zobaczysz, że dwa Divy są wyświetlane pionowo ze specyfikacjami, które zastosowaliśmy jako wbudowane CSS w znacznikach. Te Divy są wyświetlane bez przerwy między nimi. Jak widać na wyjściu, oba Div są dołączone.

Ilekroć DIV lub tabela jest używana w HTML, oba leżą jeden po drugim w kierunku pionowym, jak reprezentowaliśmy. Wynika to z faktu, że HTML generuje automatyczne odstęp. Korzystając z fenomenu „No Line Break”, przechodzimy pewne zmiany w kodzie.

Najpierw stosujemy właściwość wyświetlacza do właściwości bloków rzędowych do obu divs w CSS.

Div
Wyświetlacz: Block Inline;

Ponadto musimy zmniejszyć szerokość ciała HTML, aby oba Divy mogły dostosować się do danego rozmiaru ciała.

Ciało
Szerokość: 30%;

Po wykonaniu zobaczysz, że dwa Divy, które ogłosiliśmy, użyły właściwości CSS „No Line Break”.

Dodatkowe sposoby:

Kilka dodatkowych informacji dotyczących właściwości „No Line Break” towarzyszy za pomocą znaczników HTML bez użycia znaczników CSS osobno.

Jednym ze sposobów jest użycie ciągu  . Używanie tego sznurka pomiędzy dwoma ciągami powoduje przestrzeń, powodując, że pozostają na tej samej linii zamiast używania
tag, który prowadzi do następującej linii. Operator i (&) jest używany do celów wiązania.

123  

Innym sposobem szczeliny między dwoma strunami jest to, że HTML używa wbudowanej funkcji „NBSP” lub „nie wyłomowej przestrzeni”. Używamy NBSP między dwiema liczbami. Wyniki będą miały miejsce.

456

Teraz, po wykonaniu, zobaczysz przestrzeń między tymi trzema liczbami bez użycia przerwy linii.

Wniosek

Artykuł CSS „No Line Break” wyjaśnia zastosowanie właściwości CSS i HTML innych niż efekt przerwy stosowany przez znacznik przerwy HTML
. Na początku przedstawiliśmy proste wprowadzenie o HTML i CSS. Właściwość odpowiedzialna głównie za efekt „brak przerwy w linii” jest wyjaśniona jako właściwość wyświetlania inline-block. Wyjaśniliśmy użycie wyświetlania bloków wbudowanych na listach HTML i kontenerów Div za pomocą przykładów. Ponadto dodano również dodatkowe informacje na ten temat.