CSS nie owijaj tekstu

CSS nie owijaj tekstu
Arkusz stylów kaskadowych jest odpowiedzialny za dostarczanie efektów i właściwości do zawartości HTML. Podstawową zawartością, na który wpływa to tekst przez różne właściwości, takie jak kolor czcionki, rozmiar czcionki, w postaci nagłówka, akapit lub w dowolnym innym pojemniku. W tym artykule omówimy właściwość CSS tekstu, która dotyczy koncepcji, że tekst nie powinien być owinięty, co oznacza, że ​​powinien być wyświetlany tak, jak jest napisany w edytorze tekstu.

Właściwość tekstowa CSS Wrap

Ta właściwość CSS jest właściwością związaną z tekstem. Właściwość wyrównania tekstu jest używana tutaj do dostosowania tekstu do wyrównania wewnątrz dowolnego zewnętrznego pojemnika lub za pomocą małego obszaru do niezależnego wyświetlania. Pozwala naprawić długie słowa lub zdania w określonym obszarze lub pojemniku. Możesz także powiedzieć, że długie słowa są podzielone na dwie lub więcej części, aby można je było owinąć w następny wiersz. Musimy zastosować takie znaczniki, aby zminimalizować szansę na pakowanie tekstu, aby tekst leży na jednym wierszu. Wszystkie te efekty są stosowane zgodnie z wymaganiami.

Aby zrealizować tekst owinięcia lub nie owijać właściwości, użyjemy specjalnej właściwości CSS, która jest właściwością białej przestrzeni.

Własność białej przestrzeni

Jest to właściwość CSS, która pomaga kontrolować sposób, w jaki właściwość CSS i właściwość Białej przestrzeni są używane w każdym tworzeniu i projektowaniu stron internetowych. Biała przestrzeń to obszar obecny między wewnętrzną zawartością HTML a granicą zewnętrznej zawartości HTML. Ta właściwość określa, w jaki sposób biała przestrzeń lub obszar wewnątrz elementu HTML jest obsługiwana lub kontrolowana.

Czasami przestrzeń jest tworzona automatycznie. Musimy go usunąć, lub w innych przypadkach zastosowane specjalne efekty CSS do zarządzania białą przestrzenią wewnątrz elementu. Istnieje to samo podejście do prawidłowego stosowania lub usuwania tekstu owinięcia CSS.

Podstawowa składnia właściwości Wrap jest:

Biała przestrzeń: normalna | nowrap | Pre | Pre-Wrap | Pre-line;

Wartością może być dowolna z podanych wcześniej wartości, które są podane właściwości białej przestrzeni. Jeśli właściwość białej przestrzeni jest dostarczana przez wartość normalną, oznacza to, że biała przestrzeń wokół tekstu jest zgodnie ze standardową tabelą normalności. Wstępne zawalenie powoduje białą przestrzeń lewej strony wewnątrz elementu. Ta przestrzeń znajduje się między tekstem a elementem zewnętrznym, więc lewa strona elementu będzie miała więcej miejsca z tekstem „przed”, który ma całkowitą przestrzeń przed tekstem. Linia wstępna powoduje szczelinę linii między tekstem a granicą elementu zewnętrznego.

Jeśli nie chcemy owinąć tekstu, właściwość białej przestrzeni nie jest konieczna do zastosowania najpierw. Ale jeśli owijanie tekstu jest już wykonane i musimy go usunąć, używamy wartości „Nowraph” do tej właściwości.

Wdrożymy to zjawisko w następujących przykładach:

Przykład 1: Nie owinąć tekstu tabelami HTML

W tym przykładzie obsługujemy właściwość białej przestrzeni w treści tabeli. Tabela to pojemnik HTML, który przenosi tekst i inne zawartość w nim. Tabela różni się od pojemnika Div, ponieważ ma rzędy i kolumny. Tabela ma dwa rodzaje tagów dalej - znacznik głowy i znacznik ciała. Część głowy zawiera wiersze tabeli, a część ciała zawiera również wiersze tabeli, aby dodać dane tabeli. Podczas gdy dane HTML są wprowadzane w tabeli w postaci rzędów każdy wewnątrz znacznika nagłówka ciała i zawiera tylko odczyty.

W przykładzie tabela jest stosowana z właściwością graniczną, która ma 1 zawalenie się.


pierwszy rząd

Ta granica zapobiega owinięciu komórek stołowych.

I etykietka. Ta sekcja zawiera wartości dotyczące nagłówka. Wszystkie dalsze wiersze są wprowadzane do sekcji ciała. Używamy znacznik danych wewnątrz wierszy tabeli. Zamknij wszystkie tagi i zapisz je.

Po kodzie nadwozia HTML używamy teraz ciała CSS, aby dodać efekty białego odstępu. Nie ma potrzeby stosowania wewnętrznego CSS, ponieważ będziemy bezpośrednio używać

są używane do dodania elementów w tabeli. Zamknij tag. Te rzędy zawierają nagłówek stołu. Teraz użyj ciała
w środku
tag jak

I

tagi. Wewnątrz stylu „TH” jest stosowany przez efekt białej przestrzeni. Wyświetlamy tekst w środku jako całe zdanie na jednym wierszu, więc używamy właściwości „Nowraph”.

Teraz zapisz kod w rozszerzeniu HTML. Wykonaj plik w przeglądarce, aby zobaczyć wynikową wartość.

Po wykonaniu zobaczysz, że tabela jest tworzona z nagłówkiem zadeklarowanym na pojedynczej linii, chociaż jest wystarczająco długa, aby skorzystać z własności białej przestrzeni CSS.

Przykład 2: Nie owinąć tekstu za pomocą akapitu

Innym przykładem, którego tu użyliśmy, jest akapit. Te dwa akapity zawierają jedno słowo o kilku literach. Jeśli w akapicie używane jest zdanie, łatwo jest rozbić zdanie w miejscu. Ale jedno słowo z licznymi postaciami bez przestrzeni jest trudne do trzymania bez owijania tekstu.

Drugi akapit jest stosowany z identyfikatorem CSS. Ten identyfikator jest zadeklarowany w sekcji głównej, dzięki czemu wewnętrzne CSS. Oba akapity mają jedno słowo z licznymi literami. Teraz rozważ CSS tego kodu. Po pierwsze, całe ciało jest stosowane z efektem wyściółki i wielkości czcionki.

Akapit jest stosowany o wartości automatycznej marginesu. Ta wartość to odległość między zawartością wewnętrzną a zewnętrzną skrzynką. Dodaliśmy również właściwość wyściółki do obu akapitów. Odległość między akapitem a granicą jest obliczana na podstawie tej wartości wyściółki.
Identyfikator przepełnienia zawiera właściwość Wrap Text i podaje wartość, aby przełamać słowa, aby tekst mógł zmieścić się w granicy.

#Overflow
Przepełnienie: łamanie słowo;

Po wykonaniu zobaczysz, że akapit, w którym nie zastosowaliśmy żadnej klasy dla białej przestrzeni, przekroczył limit, który zainicjowaliśmy. Podczas gdy drugi akapit jest ograniczony w miejscu, w którym zastosowaliśmy efekt przepełnienia, aby złamać słowo.

Wniosek

Ten artykuł jest pomocny, gdy musimy zrozumieć pojęcie białej przestrzeni w treści HTML. Jeśli chcemy dodać tę białą przestrzeń w wartości zawartości HTML, w szczególności w tekście, tekst zostanie podzielony na osobne słowa i będzie wykorzystywać dwa lub więcej zdań. Ale jeśli nie chcemy owinąć tekstu właściwością CSS White-Space, tekst zostanie wyświetlony w jednym wierszu bez przerwy. Wykorzystaliśmy dwa przykłady do opracowania właściwości CSS „Don't owij tekst” za pomocą tabeli i akapitu.