Tekst CSS3
CSS3 zawiera kilka nowych funkcji tekstowych.
W tym rozdziale dowiesz się o następujących właściwościach tekstowych:
-
text-overflow -
word-wrap -
word-break
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Liczby obserwowani przez -o- określić pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
| word-wrap | 23.0 | 5.5 | 3.5 | 6.1 | 12.1 |
| word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.0 |
CSS3 Tekst przelewowy
CSS3 text-overflow właściwość określa sposób przepełniony treści, które nie są wyświetlane powinny być sygnalizowane użytkownikowi.
To może być przycięty:
To jest jakiś długi tekst, który nie zmieści się w pudełku
lub może być wyświetlany jako wielokropkiem (...):
To jest jakiś długi tekst, który nie zmieści się w pudełku
Kod CSS jest następujący:
Przykład
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
} Spróbuj sam " Poniższy przykład pokazuje, jak można wyświetlać nadmiarowe treść po najechaniu na element:
CSS3 Słowo owijania
CSS3 word-wrap właściwość umożliwia długie słowa, aby móc być złamane i zawinąć do następnego wiersza.
Jeśli słowo jest zbyt długa, by zmieścić się w obszarze, to rozszerza się na zewnątrz:
Ustęp ten zawiera bardzo długie słowo: thisisaveryveryveryveryveryverylongword . Długa słowo złamie i zawinąć do następnego wiersza.
Właściwość word-wrap pozwala wymusić tekst zawijać - nawet jeśli oznacza to dzielenie go w środku słowa:
Ustęp ten zawiera bardzo długie słowo: thisisaveryveryveryveryveryverylongword . Długa słowo złamie i zawinąć do następnego wiersza.
Kod CSS jest następujący:
Przykład
Umożliwiają długich słów, aby mogły być złamane i zawijać na następnej linii:
p {
word-wrap: break-word;
}
Spróbuj sam " CSS3 Słowo Rozstania
CSS3 word-break właściwość określa zasady łamania linii.
Ten akapit zawiera jakiś tekst. Ta linia-break-at-myślnikami.
Ten akapit zawiera jakiś tekst. Linie złamie w każdej postaci.
Kod CSS jest następujący:
Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 »
CSS3 Właściwości tekstu
Poniższa tabela zawiera nowe właściwości CSS3 tekstu:
| Nieruchomość | Opis |
|---|---|
| text-align-last | Określa sposób wyrównania ostatnią linię tekstu |
| text-emphasis | Skrót do ustawienia text-emphasis stylu i text-nacisk-kolor w jednej deklaracji |
| text-justify | Określa sposób uzasadniony Tekst powinien być wyrównany i rozstawione |
| text-overflow | Określa, jak nadmiarowe treści, które powinny być sygnalizowane użytkownikowi nie jest wyświetlany |
| word-break | Określa linia łamania zasady non-skrypty CJK |
| word-wrap | Umożliwia długie słowa, aby móc być złamane i zawinąć do następnej linii |