Home-theater-designers
Długie teksty mogą wydawać się niekontrolowane podczas projektowania stron internetowych. Ale mogą być również nieuniknione i czasami przekraczają granice. Może to spowodować powstanie luźnego modelu DOM (Document Object Model) z niepotrzebnym przepełnieniem, który nie jest przyjazny dla użytkownika.
Ale oto dobra wiadomość: możesz poradzić sobie z tak długimi tekstami, umieszczając je w nowej linii za pomocą CSS. Tutaj pokażemy, jak zawijać długie, nieprzerwane teksty za pomocą CSS.
Jak działa zawijanie tekstu CSS
CSS obsługuje rozciągnięte długie słowa za pomocą wbudowanego zawijanie tekstu lub owijka przelewowa własność.
dźwięk nie działa w systemie Windows laptopa 10
Jednak, gdy nie jest to kontrolowane, przeglądarki domyślnie obsługują tak długie teksty. Nie będą zawijać długich słów, dopóki nie otrzymają instrukcji, aby to zrobić.
Powiązane: Co musisz wiedzieć o DOM
Dwie główne właściwości CSS wspomniane wcześniej działają w ten sam sposób i można ich używać zamiennie. Akceptują jednak cztery wartości lub składnie:
- słowo-przełamanie : To jest rzeczywista składnia CSS, która mówi przeglądarce, aby zawijała długi tekst do nowej linii.
- normalna : Łamie każde słowo w normalnych punktach separacji w DOM. Nie ma wpływu na długie struny.
- Inicjał : Jest to domyślny sposób obsługi ciągów przez przeglądarkę. Podobnie jak normalna składnia, nie łamie długich słów.
- dziedziczyć : Mówi elementowi potomnemu, aby dziedziczył własność swojego rodzica. Ale nadal nie działa z długimi tekstami, chyba że aplikujesz słowo-przełamanie do elementu nadrzędnego.
Jak zawijać długie słowa za pomocą CSS Word Wrap
Zawijanie słów do nowej linii za pomocą CSS jest łatwe i nie wymaga uciążliwych poprawek CSS.
Na przykład długi h2 tekst w kontenerze tekstu na przykładowym obrazie poniżej przecina linię obramowania:
Zobaczmy, jak możemy owinąć go w następną linię za pomocą zawijanie tekstu Właściwość CSS:
HTML :
This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above
CSS :
.wrap-it{
word-wrap: break-word;
}
Po owinięciu długiego h2 tekst w przykładowym obrazie, oto wynik:
Otóż to! Wiesz już, jak zawijać słowa do nowej linii w DOM za pomocą CSS.
Windows 10 potrzebujesz uprawnień do wykonania tej akcji
Powiązane: Jak kierować do części strony internetowej za pomocą selektorów CSS
Jednak, jak wspomniano wcześniej, zawijanie tekstu oraz owijka przelewowa działaj w ten sam sposób i akceptuj podobne właściwości.
Używać owijka przelewowa zamiast tego po prostu wymień zawijanie tekstu z tym.
Ważne jest, aby zawijać słowa na stronie internetowej
Oprócz dodania estetyki do Twojej strony internetowej, zawijanie tekstów kompaktuje DOM. Nawet jeśli kontrolujesz, co trafia do sekcji treści, użytkownicy mogą publikować linki lub inne słowa, które nie pasują do Twojego kontenera tekstu lub całego DOM.
Dlatego stosowanie zawijania tekstu do takiej sekcji jest konieczne, aby DOM pozostał nienaruszony.
dodaj do listy życzeń dodatek chromeUdział Udział Ćwierkać E-mail Jak używać zapytań o media w HTML i CSS do tworzenia responsywnych stron internetowych?
Chcesz, aby Twoja witryna wyglądała niesamowicie na urządzeniach mobilnych? Czas nauczyć się korzystać z zapytań o media w CSS.
Czytaj dalej Powiązane tematy- Programowanie
- CSS
- Obiektowy model dokumentu
Idowu pasjonuje się każdą inteligentną technologią i produktywnością. W wolnych chwilach bawi się kodowaniem, a gdy się nudzi, przechodzi na szachownicę, ale od czasu do czasu uwielbia też oderwać się od rutyny. Jego pasja do pokazywania ludziom drogi do nowoczesnych technologii motywuje go do pisania więcej.
Więcej od Idowu OmisolaZapisz się do naszego newslettera
Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!
Kliknij tutaj, aby zasubskrybować