Jak zmienić domyślne zawijanie tekstu za pomocą HTML i CSS

W przeciwieństwie do papieru strony internetowe mogą prawie nieskończenie rozciągają się na boki. Tak imponujące, że nie jest to coś, czego naprawdę potrzebujemy podczas czytania. Przeglądarki zawijają tekst w zależności od szerokość kontenera tekstowego i szerokość ekranu abyśmy mogli zobaczyć cały tekst bez konieczności przewijania na boki (tylko w dół).

Zawijanie coś, co przeglądarki robią biorąc pod uwagę wiele czynników, takich jak język tekstu lub rozmieszczenie znaków interpunkcyjnych i spacji - one nie tylko naciskaj co nie mieści się w polu zdefiniowanym dla treści tekstowej.

Oprócz pakowania, przeglądarki również zadbaj o przestrzenie; łączą wiele kolejnych spacji w kodzie źródłowym w jedno miejsce na renderowanej stronie, a także rejestrują wymuszone podziały wierszy przed rozpoczęciem pracy nad opakowaniem.

Kiedy zmienić domyślne zawijanie tekstu

To wszystko świetnie i bardzo doceniane. Ale możemy łatwo znaleźć się w okolicznościach, w których domyślne zachowanie przeglądarki nie jest tym, czego szukamy. To może być nagłówek nie powinien być zawinięty lub słowo w akapicie lepiej być złamanym niż zejść po linii, pozostawiając dziwnie pustą przestrzeń na końcu linii.

Może się też zdarzyć, że desperacko potrzebuję tych przestrzeni zachowanych w naszym tekście, jednak przeglądarka nadal łączy je w jedną, zmuszając nas do dodania wielu w kodzie źródłowym.

Preferencje owijania mogą również zmienić język i cel tekstu. Artykuł Mandarin i francuski wiersz niekoniecznie muszą być opakowane dokładnie w ten sam sposób.

Istnieje duża liczba właściwości CSS (i elementów HTML!), Które mogą kontroluj zawijanie i punkty przerwania i również zdefiniuj sposób przetwarzania spacji i podziałów linii przed zawijaniem.

Możliwości miękkiego owijania i łamanie miękkich okładów

Przeglądarki decydują, gdzie zawinąć przepełniony tekst w zależności od granic słów, myślników, sylab, interpunkcji, spacji i innych. Wszystkie te miejsca są nazywane możliwości miękkiego zawijania a gdy przeglądarka złamie tekst w jednym z takich miejsc, przerwa nazywa się miękka okładka.

Najprostszy sposób wymusić dodatkową przerwę można to zrobić, używając dobrego starego
element.

Biała przestrzeń

Jeśli znasz Biała przestrzeń Własność CSS Założę się, że najpierw poznałeś ją w taki sam sposób, jak wiele innych; podczas szukania drogi do zapobiec zawijaniu tekstu. The nowrap wartość Biała przestrzeń robi dokładnie to.

Jednakże Biała przestrzeń nieruchomości to coś więcej niż tylko opakowanie. Po pierwsze, co to jest białe znaki? To jest zestaw znaków spacji. Każda przestrzeń w zestawie różni się od siebie pod względem długości, kierunku lub obu.

Typowy pojedynczy poziomy znak przestrzenny dodajemy, naciskając klawisz spacji. Klawisz Tab również dodaje a podobna przestrzeń, ale o większej długości. Klawisz Enter dodaje a przestrzeń pionowa aby rozpocząć nową linię, i w HTML dodaje a pojedyncza nierozerwalna przestrzeń do stron internetowych. W ten sposób istnieje wiele rodzajów przestrzeni, które stanowią “Biała przestrzeń”.

Jak wspomniałem na początku, przeglądarki zwijaj wiele przestrzeni (zarówno poziome jak i pionowe) w źródle w pojedynczą przestrzeń. Oni też rozważyć te znaki spacji dla możliwości zawijania (miejsca, w których tekst może być zawinięty), gdy potrzebne jest opakowanie.

I to właśnie te działania przeglądarki możemy kontrolować Biała przestrzeń. Zauważ, że Biała przestrzeń właściwość nie wpływa na wszystkie rodzaje przestrzeni, tylko te najczęstsze takie jak zwykła pozioma pojedyncza przestrzeń, obszar tabulacji i kanały linii.

Poniżej znajduje się zrzut ekranu przykładowego tekstu owinięty przez przeglądarkę, aby zmieścił się w swoim pojemniku. Przelew ma miejsce na dnie pojemnika, a tekst przelotowy jest różnie barwiony. Zauważysz załamanie kolejnych przestrzeni w kodzie.

 
 ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Cześć a¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â dzień dobry. 

 .textContainer width: 500px; wysokość: 320px;  

Po złożeniu wniosku white-space: nowrap; reguła, zawijanie tekstu zmienia się w następujący sposób:

 .textContainer / *… * / white-space: nowrap;  

The przed wartość Biała przestrzeń zachowuje wszystkie białe znaki i zapobiega zawijaniu tekstu:

 .textContainer / *… * / white-space: pre;  

The opakowanie wstępne wartość Biała przestrzeń zachowuje wszystkie białe znaki i zawija tekst:

 .textContainer / *… * / white-space: pre-wrap;  

Wreszcie pre-line wartość Biała przestrzeń zachowuje pionowe białe znaki takie jak nowe linie i zawija tekst:

 .textContainer / *… * / white-space: pre-line;  

Słowo się psuje

Inną ważną właściwością CSS, którą powinieneś znać przy sterowaniu zawijaniem tekstu jest łamanie słów. Na wszystkich powyższych zrzutach ekranu widać, że przeglądarka zawinął tekst przed słowem “dzień dobry” po prawej stronie, poza którą tekst przepełniony. Przeglądarka nie złamałem słowa.

Jednak jeśli ty musieć pozwala łamać litery jednym słowem aby tekst wyglądał nawet po prawej stronie, musisz użyć break-all wartość dla łamanie słów własność:

 .textContainer / *… * / word-break: break-all;  

The łamanie słów właściwość ma trzecią wartość break-all i normalna (należy do domyślnego łamania linii). The Zatrzymaj wszystko wartość nie pozwala łamać słów.

Możesz nie być w stanie zobaczyć efektu Zatrzymaj wszystko po angielsku. Ale w językach, w których są litery w jednym słowie znaczące jednostki samodzielnie, przeglądarka może złamać słowa podczas owijania, a tego można zapobiec Zatrzymaj wszystko.

Na przykład litery w słowach koreańskich, początkowo złamany do pakowania, są trzymane razem kiedy white-space: keep-all; reguła jest określona.

ZA¬Â¸ZAªZA³Â     ¥ZA¼ Ã-Â-Â¥Ã- ?? à «Â ??¬Â         ¬ZA½Â          ¡ZA?? Ã- ??  ìÂ-쬤. ZA¬Â 10Ã- ?? ZA¬Â         ¬ZA½Â      ?? ZAªZAµÂ-ì Ã- ??  ìª°  1997à «Â…  ?? 3ì 10 A¬Â¼Ã «¶Â  Ã- ° ° 12ì¼ZAªZA¹Â ìZA§ZA?? à «Â ?? Â… ì¼ZA¬Â à «§Â ì¸ZA¬ZA¦Â ì    ì ZA¬Â´Ã «¦ZA½Â          ¤. ZA¬ZA§Â êZA¸ZA?? à «Â ± ë ¡ Ã- ???¬Â-쬤. ZA¬Â´ Ã- ??  ì¬    ì        ?? ZA¬Â Â… êZA³ZA?? ZA¬Â        ° ì ZA¬Â      ¬ZA¸ZAªÂ        ¤ZA¬Â´ Ã- ¨ZAª» à «ªZA¨ZA¬Â¬ à «Â?¤ZA¬ÂªZA³ZA¼ ZAªÂ    ì à «¶Â ì¼à «¥ZA¼ à «Â?¤Â               ¹          ¤.

 .textContainer / *… * / word-break: keep-all;  

Ta właściwość może obsługiwać inną wartość o nazwie słowo łamane w przyszłości. Zobaczysz jak słowo łamane działa później, w “Okładka przelewowa” część tego artykułu.

Możliwości łamania słów

Deweloperzy mogą również dodaj możliwości zawijania w słowach, używając Element HTML. Jeśli przeglądarka musi zawinąć ciąg tekstowy, weźmie pod uwagę miejsce, w którym się znajduje jest obecny przy okazji pakowania.

 
 ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Hello â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â Dzień dobry. ZA¢Â dzień dobry. 
 

 .textContainer / *… * / white-space: pre-wrap;  

Bez , całość “dzień dobry” słowo zostanie wyrenderowane w nowej linii. Poprzez dodanie do kodu HTML poinformowaliśmy przeglądarkę, że w porządku jest łamanie słowa w tym momencie, w razie konieczności.

Hyphens

The myślniki Właściwość CSS to inny sposób kontrolowania przerw między literami jednym słowem. Jeśli jesteś zainteresowany, mamy osobny artykuł na temat dzielenia CSS. Krótko mówiąc, własność pozwala tworzyć możliwości pakowania poprzez dzielenie wyrazów.

Jego automatyczny wartość monituje przeglądarkę automatycznie dziel słowa i dziel słowa w razie potrzeby podczas owijania. The podręcznik wartość zmusza przeglądarki do wrap (w razie potrzeby) przy dodanych przez nas możliwościach dzielenia wyrazów, taki jak znak łącznika (‐) lub ­ (miękki łącznik). Jeśli Żaden został podany jako wartość bez owinięcia w pobliżu myślników.

 
 bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse 
 

 .textContainer / *… * / -webkit-hyphens: auto; -ms-hyphens: auto; łączniki: auto;  

Okładka przelewowa

The overflow-wrap Kontrola właściwości CSS, jeśli a przeglądarka może łamać słowa (lub zachowane przestrzenie, wsparcie, które może się zdarzyć w najbliższej przyszłości) przy przepełnieniu. Kiedy słowo łamane podana jest wartość overflow-wrap, słowo zostanie złamany w razie gdyby nie znaleziono innych możliwości miękkiego zawijania w linii.

Zauważ to overflow-wrap jest również znany jako zawijanie tekstu (są aliasami).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

 .textContainer / *… * / overflow-wrap: break-word;  

Bez spacji między literami w powyższym kodzie HTML (tzn. Bez możliwości zawijania) tekst nie był początkowo zawijany i został zachowany jako jedno słowo.

Jednak, gdy zezwolono na zawijanie tekstu przez łamanie słów (tj słowo łamane wartość została podana overflow-wrap) owinięcie nastąpiło przez rozbicie całego łańcucha gdziekolwiek było to konieczne.