Jak ustawić odstępy tekstowe i umiejscowienie w CSS

Podczas pisania dokumentu należy poprawnie zorganizować tekst. Pomoże to użytkownikom zrozumieć przepływ treści i pomocy w czytaniu dokumentu. Aby to zrobić, muszą istnieć odpowiednie korekty tekstu, takie jak wcięcie, przestrzenie słów, wyrównanie, kierunek i więcej. Mówiąc dokładniej, CSS pozwala nam używać kilku właściwości do dostosowania odstępów tekstu i umiejscowienia.

Wynikiem tego artykułu będzie:

• Co to jest odstępy tekstowe?
• Jak używać właściwości odstępów tekstu CSS
• Jakie są właściwości umieszczania tekstu CSS?
• Jak korzystać z właściwości umieszczania tekstu CSS?

Co to jest odstępy tekstowe?

Odstępy tekstowe odnoszą się do ilości miejsca wśród konkretnego tekstu. Kilka właściwości CSS jest wykorzystywanych do dodawania przestrzeni do tekstu.

Jak używać właściwości odstępów tekstu CSS?

Aby zapewnić przestrzenie w tekście, CSS pozwala nam korzystać z różnych właściwości, które są wymienione poniżej:

• Biała przestrzeń
• Tekst-indent
• Strony słów
• Wysokość linii
• odstępy między literami

Przykład 1: Jak wdrożyć tekst elementu?

CSS „Tekst-indent„Własność jest wykorzystywana do dodania wgłębienia do pierwszego wiersza tekstu. Aby go wykorzystać, dodaj element DIV z klasą „akapit". W tej div, dodaj

tag do nagłówka i

tag do dodania akapitu.

Html

Własność tekstu tekstowego CSS

Odstępy tekstowe zapewniają bardzo schludny wygląd treści pisemnej.
Tekst powinien zostać złamany w możliwych do opanowania kawałkach.

Styl „wgłębia” div

.akapit
Szerokość: 350px;
Wysokość: 200px;
Tekst-indent: 40px;
Margines: Auto;
Wyściółka: 5px;
kolor tła: #FFC107;
granica: 10px solid #9e9e9e;

Lista właściwości CSS zastosowanych do wgłębienia Div wyjaśniono poniżej:

• "szerokość„Własność jest wykorzystywana do ustawienia szerokości elementu.
• "wysokość„Właściwość służy do ustawiania wysokości elementu.
• "Tekst-indent„Własność jest ustawiona o wartości„40px”, Który reprezentuje przestrzeń 40px na początku pierwszego wiersza akapitu.
• "margines„Właściwość z ustawioną wartością jako„automatyczny”Generuje równą przestrzeń wokół elementu.
• "wyściółka„Własność o wartości”5px”Dodaj przestrzeń 5px wokół zawartości elementu.
• "kolor tła„Właściwość określa kolor tła elementu.
• "granica„Właściwość z ustawioną wartością jako„10px solid #9e9e9e”Oznacza szerokość obramowania, styl graniczny i kolor graniczny.

Styl „H2” „wgłębienia” div

.wcięcie H2
Dekoracja tekstu: 3px Podkreśl Gray;

Element nagłówka wgłębia jest stosowany „dekoracja tekstu„Własność o wartości”3px Podkreśl szary" gdzie "3px”Reprezentuje szerokość linii„podkreślać”Reprezentuje linię pod tekstem i„szary" jest koloru.

Wyjście

Przykład 2: Jak dodać białe przestrzenie w elemencie?

„„CSS biała przestrzeń”Właściwość określa białe przestrzenie w danym elemencie. Ta właściwość opiera się na następujących wartościach:

• normalna
• nowrap
• Wcześniejsze
• przed
• wstępnie linia
• BreakSpaces

Html

W CSS określ właściwość białej przestrzeni o wartości „wstępnie linia”:

Biała przestrzeń: wstępna linia;

Wyjście

Przykład 3: Jak dodać przestrzenie między słowami?

CSS „Strony słów„Właściwość jest wykorzystywana do określania przestrzeni między tekstem elementu. Ta właściwość jest powiązana z następującymi wartościami:

• długość
• normalna
• wstępny
• dziedziczyć

Spójrz na przykład!

W tym przykładzie dodamy „Strony słów„Własność o wartości”30px”:

Spacer słów: 30px;

Wyjście

Przykład 4: Jak dodawać przestrzenie między liniami?

„„Wysokość linii„Właściwość jest wykorzystywana do określania pionowej przestrzeni między wierszami tekstu.

Tutaj w tym przykładzie właściwość linii jest używana z wartością „3em”:

Wysokość linii: 3em;

Wyjście

Przykład 5: Jak dodać przestrzenie między znakami tekstu?

CSS „odstępy między literami„Właściwość jest wykorzystywana do dodawania przestrzeni między znakami tekstu.

Tutaj element jest dostarczany z właściwością odcinka liter o wartości „-1px„W CSS:

Spacer z literami: -1px;

Wyjście

Jakie są właściwości umieszczania tekstu?

Umieszczenie tekstu odnosi się do wyrównania tekstu. Oznacza pozycję tekstu jako lewą, prawą i wiele innych, w związku z punktem wstawienia tekstu.

Jak korzystać z właściwości umieszczania tekstu CSS?

Poniżej znajdują się właściwości, które można wykorzystać do dostosowania umieszczenia tekstu.

• tekst-align-last
• tekst-align
• Pion-align
• kierunek
• Unicode-bidi

Przykład 1: Jak wyrównać ostatni wiersz tekstu elementu?

CSS „tekst-align-last„Własność jest wykorzystywana do dostosowania wyrównania ostatniego wiersza tekstu. W naszym przypadku ustawiliśmy właściwość Lista-Lign, jako „właściwą”:

tekst-align-last: racja;

Wyjście

Przykład 2: Jak wyrównać tekst w poziomie w HTML?

CSS „tekst-align„Własność jest wykorzystywana do wyrównania tekstu w poziomie. Na przykład ustaliliśmy jego wartość jako „Prawidłowy”:

Text-Align: Right;

Wyjście

Przykład 3: Jak wyrównać tekst pionowo w HTML?

„„Pion-align„Własność CSS służy do wyrównania tekstu w pionie.

Aby użyć tej właściwości, dodaj „

„Element do dodania akapitu do pożądanego dokumentu. Ten akapit składa się z elementów w niektórych punktach z identyfikatorem „napisany u góry”:

Wyrównanie tekstu zapewnia czytelnicy z wizualnie
tekst logiczny.

W CSS element z id ”napisany u góry”Jest stylizowany z następującymi właściwościami:

#SuperScript
kolor tła: RGB (3, 162, 11);
pion-align: super;

Tutaj:

• "kolor tła„Właściwość jest wykorzystywana do ustawienia koloru tła elementu.
• "Pion-align" wartość nieruchomości "Super”Wyrównuje tekst nieco pionowo powyżej.

Wyjście

Przykład 4: Jak zmienić kierunek tekstu?

CSS „kierunek„Właściwość jest wykorzystywana do modyfikacji kierunku tekstu elementu.

W CSS właściwość kierunku o wartości „RTL”Określono, aby kierunek elementu od prawej do lewej:

Kierunek: RTL;

Wyjście

Przykład 5: Jak obsługiwać tekst dwukierunkowy w HTML?

Aby obsłużyć tekst dwukierunkowy w dokumencie, CSS ”Unicode-bidi”Nieruchomość jest wykorzystywana. Tekst dwukierunkowy odnosi się do dokumentu zawierającego tekst w obu kierunkach, od prawej do lewej i lewej do prawej. Tekst dwukierunkowy zwykle istnieje w dokumencie o wielu językach, które można ustawić za pomocą „kierunek" nieruchomość.

Do demonstracji dodaj następujący kod w pliku CSS:

Kierunek: RTL;
Unicode-Bidi: Bidi-Override;

Tutaj:

• "kierunek„Właściwość jest ustawiona o wartości”RTL”, Który wskazuje prawą do lewego kierunku tekstu.
• "Unicode-bidi„Właściwość z ustawioną wartością jako„Bidi-Override”Służy do określenia, czy podany tekst powinien zostać zastąpiony w celu obsługi wielu języków w dokumencie.

Wyjście

Chodziło o dostosowanie odstępu tekstu i umieszczenie w CSS.

Wniosek

Pisząc dokument, należy pamiętać o formacie i stylu dokumentu. Dobrze formatowany dokument nie powoduje żadnych problemów z czytelnością. Aby to zrobić, CSS zapewnia nam różne właściwości, które pomagają w odstępach i umieszczaniu tekstu w HTML. Niektóre nieruchomości to „tekst-align”,„kierunek”,„tekst-align-last", i więcej. Ten post wykazał różne właściwości CSS, które pomagają w ustawieniach wyrównania tekstu i umieszczania dokumentów HTML.