Elipsa to znak interpunkcyjny złożony z trzech kropek używanych do wskazania braku słowa, akapitu, cytatu lub więcej. Często w fikcji wykorzystaliśmy elipsę do wskazania wahania lub czegoś do zbudowania ciekawości. Mówiąc dokładniej, te elipsy są wykorzystywane, w których zdanie nie jest zakończone. Aby pokazać elipsis na swojej stronie internetowej, można zastosować tekst właściwości CSS z elipsą wartościową.

W tym artykule poprowadzi Cię, dlaczego właściwość tekstu z wartością z elipsą nie działa.

Dlaczego elipsę tekstową nie działa w CSS?

Omówimy podany temat za pomocą praktycznej demonstracji.

Aby to zrobić, w HTML najpierw dodaj element DIV z nazwą klasy „główny". Następnie dodaj

element, aby dodać nagłówek do strony internetowej, div o nazwie klasy „podrozdział”, Który zawiera dwie klasy DIV,„lewa sekcja" I "prawy sekcja". Te dwa elementy DIV zawierają

elementy do kierowania, a następnie dodawane są do nich niektóre treści. W końcu A

Tag jest dodawany, aby dodać trochę treści.

Html

Witamy w Linuxhint School

Jakość edukacji

Zapewniamy światu wysokiej jakości edukację!

Pisanie artykułów

Autor techniczny pisze artykuły na tematy informatyki.

Możesz nauczyć się wszelkich tematów informatyki na stronie internetowej Linuxhint. Naszym pierwszym priorytetem jest nasza publiczność.

Struktura strony internetowej jest zakończona i można ją zobaczyć na poniższym obrazku:

Następna sekcja pokaże, jak zastosować właściwości stylu do elementów HTML. W tym celu dodaj właściwość „Tekst-przewrócenie”Z wartością„elipsy" do

element, "lewa sekcja", I "prawy sekcja". Zobaczmy, co się stanie, gdy ta właściwość zostanie zastosowana do elementów.

Styl Main Div

.główny
szerokość: 500px;
Margines: 2px Auto;
Wyściółka: 8px;
RADIUS BRAVES: 10px;
kolor tła: #432C7A;
Kolor: Ghost White;

„„.główny”Odnosi się do elementu DIV o nazwie klasy Main. Opis stosowanych właściwości CSS podano poniżej:

• "szerokość„Własność jest wykorzystywana do ustawienia szerokości elementu na„500px".
• "margines„Własność jest ustawiona na„2px Auto”, Który określi przestrzeń 2px w górnym dnie i równa przestrzeni od lewych prawej strony div.
• "wyściółka„Własność o wartości”8px”Dodaje przestrzeń 8px wokół zawartości Div Main.
• "Radiusz graniczny„Własność sprawia, że ​​narożniki elementu DIV są zaokrąglone.
• "kolor tła”Właściwość ustawia określony kolor na tło elementu.
• "kolor”Właściwość ustawia kolor na czcionkę elementu.

Styl Element P

.główny,
.lewa sekcja,
.Prawa sekcja p
Rozmiar czcionki: 18px;

Element Div Main, lewa i prawy sekcja jest wyposażona w „rozmiar czcionki" Jak "18px".

Style H1 Element głównej div

.Main H1
Text-Overflow: Elipsis;

Użyj „Tekst-przewrócenie„Własność o wartości”elipsa" do

element Div Main.

Styl podsekcji div

.Podsekcja
Wyświetlacz: Flex;

Element div o nazwie klasy „podrozdział”Jest stosowany z właściwością wyświetlania„przewód„Aby stworzyć elastyczny, responsywny układ.

Styl lewy div

.lewa sekcja
kolor tła: #FA9393;
Wyściółka: 3px;
Margines: 1px;
RADIUS BRAVES: 10px;

„„.lewa sekcja”Odnosi się do klasowej lewej części elementu DIV. Wyjaśnienie właściwości zastosowanych do tego elementu DIV podano poniżej:

• "kolor tła„Właściwość stosuje kolor do tła elementu.
• "wyściółka„Własność produkuje przestrzeń wokół zawartości Div lewej sekcji.
• "margines„Własność produkuje przestrzeń wokół elementu Div lewej części.
• "Radiusz graniczny„Własność sprawia, że ​​spiczaste krawędzie okrągłe.

Styl prawy sekcja div

.prawy sekcja
kolor tła: #ff8fb1;
Wyściółka: 3px;
Margines: 1px;
Text-Overflow: Elipsis;
RADIUS BRAVES: 10px;

Następujące właściwości są stosowane do elementu DIV o nazwie klasy „prawy sekcja”:

• "kolor tła„Właściwość stosuje kolor do tła elementu.
• "wyściółka„Własność dodaje miejsce wokół zawartości Div lewej sekcji.
• "margines„Własność dodaje przestrzeń wokół lewego elementu DIV.
• "Tekst-przewrócenie„Z wartością elipsis jest wykorzystywany do sygnalizacji użytkownika, że ​​przepełnienie tego tekstu jest ukryte.
• "Radiusz graniczny„Właściwość jest wykorzystywana do konwersji krawędzi elementu na okrągłe.

Podając powyższy kod, wynik jest wyświetlany w następujący sposób:

Na powyższym obrazie widać, że tekst nagłówka

, lewa obróbka i prawia sekcja nie jest wyświetlana w tekście elipsy. Teraz, w następnej sekcji, zastosujemy właściwość tekstu z innymi właściwościami, które pomogą w tworzeniu tekstu z elipsis (…).

Jak korzystać z elipsy tekstowej w CSS?

Właściwość tekst-przewrócenie działa w połączeniu z innymi właściwościami białą przestrzeń z wartością nowrap, przepełnienie z wartością ukrytą:

Biała przestrzeń: nowrap;
Olflow: ukryty;
Text-Overflow: Elipsis;

Opis właściwości jest wspomniany poniżej:

• "Biała przestrzeń„Własność o wartości”nowrap”Jest wykorzystywany do regulacji tekstu w linii prostej.
• "przelewowy„Własność o wartości”ukryty”Jest wykorzystywany do ukrycia tekstu przepełnienia.
• "Tekst-przewrócenie„Własność o wartości”elipsa”Jest wykorzystywany do przekształcenia tekstu w elipsę.

Wyjście

Otóż ​​to! Z powodzeniem dowiedzieliśmy się, dlaczego CSS Text-Noverflow Elipsis nie działa i jak to naprawić.

Wniosek

W CSS właściwości tekstu można przypisać elipsowi wartości. Ale to nie zadziała sam. Elipsa działa na elemencie, który szerokość jest ustawiona w „piksele”Właściwość białej przestrzeni musi być określona jako„nowrap”Oraz wartość właściwości przepełnienia jako„ukryty". W tym artykule pokazano, jak działa właściwość tekstowa CSS z wartością Elipsis i dostarczył odpowiedni przykład.