CSS Metin Etkileri

CSS Metin Fazlalığı, Tüm Harf Yeniden Yeniden Çizme, Yatay Çizgileme Kuralları ve Yazı Modu

Bu bölümde, aşağıdaki özellikleri öğreneceksiniz:

  • text-overflow
  • word-wrap
  • word-break
  • writing-mode

CSS Metin Fazlalığı

CSS text-overflow Özellik, kullanıcıya gösterilmeyen fazlalık içeriğinin nasıl sunulacağını belirler.

Kesilebilir:

Bu, kutuyu içinde barındıramayan uzun metinlerdir. Bu, kutuyu içinde barındıramayan uzun metinlerdir

Ayrıca, noktalı virgülle (...) kısaltarak da sunulabilir:

Bu, kutuyu içinde barındıramayan uzun metinlerdir. Bu, kutuyu içinde barındıramayan uzun metinlerdir

Aşağıdaki CSS kodu:

Ö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; 
}

Kişisel olarak deneyin

Aşağıdaki örnek, bir elemente fareni sürdüğünüzde nasıl yansıtılacağını gösterir:

Örnek

div.test:hover {
  overflow: visible;
}

Kişisel olarak deneyin

CSS Kelime Değiştirme (Word Wrapping)

CSS word-wrap Özellik, uzun metinlerin kesilip bir sonraki satıra aktarılmasını sağlar.

Bir kelime bir bölgeye sığmayacak kadar uzunsa, dışa doğru genişler:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

word-wrap özelliği ile, metni zorla satıra ayırabilirsiniz - bu kelimenin ortasında kesilmesi anlamına gelir:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

Aşağıdaki CSS kodu:

Örnek

Uzun kelimelerin kesilip bir sonraki satıra aktarılmasını sağlar:

p {
  word-wrap: break-word;
}

Kişisel olarak deneyin

CSS Satır Değiştirme Kuralları

CSS word-break Özellik, satır değiştirme kurallarını belirtir.

Bu paragraf bazı metin içerir. Bu satır tirelerde kesilir:

This paragraph contains some text. This line will-break-at-hyphens.

Bu paragraf bazı metin içerir. Bu satırlar herhangi bir karakterde kesilir:

This paragraph contains some text. The lines will break at any character.

Aşağıdaki CSS kodu:

Örnek

p.test1 {
  word-break: keep-all;
}
p.test2 {
  word-break: break-all;
}

Kişisel olarak deneyin

CSS Yazı Modu

CSS writing-mode Özellik, metin satırının yatay mı yoksa dikey mi yerleştirileceğini belirler.

Some text with a span element with a vertical-rl writing-mode.

Aşağıdaki örnek, farklı yazı modlarını gösterir:

Örnek

p.test1 {
  writing-mode: horizontal-tb; 
}
span.test2 {
  writing-mode: vertical-rl; 
}
p.test2 {
  writing-mode: vertical-rl; 
}

Kişisel olarak deneyin

CSS metin etkisi özellikleri

Aşağıdaki tablo, CSS metin etkisi özelliklerini içerir:

Özellik Tanımlama
text-align-last Metnin son satırının nasıl hizalanacağını belirtir.
text-justify Hizalanan metnin nasıl hizalanacağını ve aralıklarını belirtir.
text-overflow Görünmeyen içeriğin nasıl sunulacağını belirtir.
word-break CJK dışı yazıların satır değiştirme kurallarını belirtir.
word-wrap Uzun kelimelerin kırılarak bir sonraki satıra taşınmasını sağlar.
writing-mode Belirtilen metin satırının yatay mı yoksa dikey mi konumlandırılacağını belirler.