CSS Metin Etkisi

CSS Metin Aşırı, Tüm Harf Değişimi, 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 Aşırı

CSS text-overflow Özellik, kullanıcıya gösterilmeyen aşırı içeriklerin nasıl sunulacağını belirler.

Kesilebilir:

Bu, çerçevede tutulamayan uzun metinlerdir. Bu, çerçevede tutulamayan uzun metinlerdir

Ayrıca, ... ( noktalı virgül) ile sunulabilir:

Bu, çerçevede tutulamayan uzun metinlerdir. Bu, çerçevede tutulamayan 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 fareyi getirirken nasıl yansıtılacağını gösterir:

Örnek

div.test:hover {
  overflow: visible;
{}

Kişisel olarak deneyin

CSS Kelime Sarmalama (Word Wrapping)

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

Bir kelime bölgeye sığmadığında, dışarıya doğru genişler:

Bu paragraf çok uzun bir kelime içerir: thisisaveryveryveryveryveryverylongword. Uzun kelime kesilir ve bir sonraki satıra taşınır.

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

Bu paragraf çok uzun bir kelime içerir: thisisaveryveryveryveryveryverylongword. Uzun kelime kesilir ve bir sonraki satıra taşınır.

Aşağıdaki CSS kodu:

Örnek

Uzun kelimelerin kesilip bir sonraki satıra taşınmasına izin verilir:

p {
  word-wrap: break-word;
{}

Kişisel olarak deneyin

CSS Satır Değiştirme Kuralı

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

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

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

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

Bu paragraf bazı metin içerir. Satırlar her karakterde kesilir.

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 dikey mi yoksa yatay mı yerleştirileceğini belirler.

Bir span ögesi ile bazı metin 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:

属性 Açıklama
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 sızan içeriğin kullanıcıya nasıl sunulacağını belirtir.
word-break CJK olmayan yazıların satır değiştirme kurallarını belirtir.
word-wrap Uzun kelimelerin nasıl kesileceğini ve bir sonraki satıra taşınacağını belirler.
writing-mode Belirtilen metin satırının yatay mı yoksa dikey mi konumlandırılacağını belirtir.