CSS Metin Efektleri
CSS Metin Taşması, Kelime Kaydırma, Satır Kesme Kuralları ve Yazma Modları
Bu bölümde aşağıdaki özellikler hakkında bilgi edineceksiniz:
text-overflowword-wrapword-breakwriting-mode
CSS Metin Taşması
CSS text-overflowözelliği, görüntülenmeyen taşan içeriğin kullanıcıya nasıl bildirileceğini belirtir.
Kesilebilir:
Bu, kutuya sığmayacak uzun bir metin
veya üç nokta olarak gösterilebilir (...):
Bu, kutuya sığmayacak uzun bir metin
CSS kodu aşağıdaki gibidir:
Örnek
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;
}
Aşağıdaki örnek, öğenin üzerine geldiğinizde taşan içeriği nasıl görüntüleyebileceğinizi gösterir:
Örnek
div.test:hover {
overflow: visible;
}
CSS Kelime Sarma
CSS word-wrapözelliği, uzun kelimelerin bölünebilmesini ve bir sonraki satıra sarılabilmesini sağlar.
Bir kelime bir alana sığmayacak kadar uzunsa, dışına genişler:
Bu paragraf çok uzun bir kelime içeriyor: bu çok çok çok çok çok uzun bir kelime. Uzun kelime kırılacak ve bir sonraki satıra kaydırılacaktır.
Word-wrap özelliği, metni bir kelimenin ortasında bölmek anlamına gelse bile, metni kaydırmaya zorlamanıza olanak tanır:
Bu paragraf çok uzun bir kelime içeriyor: bu çok çok çok çok çok uzun bir kelime. Uzun kelime kırılacak ve bir sonraki satıra kaydırılacaktır.
CSS kodu aşağıdaki gibidir:
Örnek
Uzun kelimelerin bölünebilmesine ve bir sonraki satıra sarılmasına izin verin:
p {
word-wrap: break-word;
}
CSS Kelime Kırma
CSS word-breaközelliği, satır kesme kurallarını belirtir.
Bu paragraf bazı metinler içeriyor. Bu satır kısa çizgi ile bölünür.
Bu paragraf bazı metinler içeriyor. Çizgiler herhangi bir karakterde kırılacaktır.
CSS kodu aşağıdaki gibidir:
Örnek
p.test1 {
word-break:
keep-all;
}
p.test2 {
word-break:
break-all;
}
CSS Yazma Modu
CSS writing-modeözelliği, metin satırlarının yatay mı yoksa dikey mi yerleştirileceğini belirtir.
Bir yayılma öğesi içeren bazı metinlerdikey-rlyazma modu.
Aşağıdaki örnek, bazı farklı yazma modlarını göstermektedir:
Örnek
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode:
vertical-rl;
}
CSS Metin Efekti Özellikleri
Aşağıdaki tablo, CSS metin efekti özelliklerini listeler:
| Property | Description |
|---|---|
| text-justify | Specifies how justified text should be aligned and spaced |
| text-overflow | Specifies how overflowed content that is not displayed should be signaled to the user |
| word-break | Specifies line breaking rules for non-CJK scripts |
| word-wrap | Allows long words to be able to be broken and wrap onto the next line |
| writing-mode | Specifies whether lines of text are laid out horizontally or vertically |