Siteyi düzenlerken, web yöneticilerinin periyodik olarak bir sorusu vardır: Metin nasıl sarılır? Çoğu durumda, tarayıcı bu görevi kendi başına gerçekleştirir. Ancak bazen, özellikle yanlış aktarılırsa anlamını yitiren uzun kelime ve deyimleri şekillendirirken bu sürecin kontrol altına alınması gerekir.
sözcük kaydırma özelliği
HTML'de satırları ayırmak için özel bir etiket vardır.
. Ancak, çok sık kullanımı geliştiriciler arasında kötü biçim olarak kabul edilir ve genellikle profesyonellikten uzak olduğunu gösterir. Kanıt olarak, bir logonuz olduğunu ve her harfin yeni bir satırda başlamasını istediğinizi hayal edin:
Sonuç, herhangi bir geliştiricinin bir kültür şoku yaşayacağı hantal ve çirkin bir koddur. Peki ya logonun masaüstü sürümünde yatay olarak, ancak ekran genişliği 550 pikselden azsa dikey olarak görüntülenmesini istiyorsanız? Bu nedenle, öğelerin görünümünü özelleştirmek için her zaman basamaklı stil sayfaları kullanın. Ayrıca CSS araçları yardımıyla satır sonları daha şık bir şekilde gerçekleştirilir. Aynı zamanda, yalnızca sayfa yükleme hızını azaltan gereksiz bir işaretleme yoktur.
Metin işleme için bakılacak ilk özellik kelime kaydırmadır. Üç değer alır: normal, hepsini kes ve hepsini tut. Çalışmak için her şeyi kırmayı hatırlamanız yeterlidir. Normal varsayılandır ve bunu belirtmenin bir anlamı yoktur. Hepsini tut, bir CSS belgesinde satır sonlarını önlemek anlamına gelir. Çince, Japonca ve Korece karakterler için özel olarak tasarlanmıştır. Dolayısıyla, bu dillerden herhangi birinde blog yazmayacaksanız, bu özelliğe ihtiyacınız olmayacak. Ayrıca Safari tarayıcısı ve iOS cep telefonları tarafından da desteklenmemektedir.
CSS kullanarak önceki örnekteki logoya her harf için yeni bir satır atamak için aşağıdaki kodu yazmanız gerekir:
P( yazı tipi: kalın 30 piksel Helvetica, sans-serif; genişlik: 25 piksel; sözcük kaydırma: tümünü kır; )
Yazı tipi genişliği ve boyutu, yalnızca bir harf için yeterli alan olacak şekilde seçilir. Break-all değerine sahip Word-wrap, tarayıcıya her seferinde sözcüğü yeni bir satıra kaydırmasını söyler. Bu özellik yeri doldurulamaz olarak adlandırılamaz. Ancak yorum alanları gibi metin içeren küçük bloklar tasarlarken kullanışlı olacaktır.
beyaz boşluk özelliği
Acemi web geliştiricilerinin yaptığı yaygın bir hata, metni boşluklarla düzenlemeye çalışmak veya Enter tuşuna basmak ve ardından çabalarının neden sayfada görünmediğini merak etmektir. "Enter" tuşuna ne kadar basarsanız basın, tarayıcı bunu görmezden gelecektir. Ancak metni istediğiniz şekilde görüntülemenin ve tüm boşlukları hesaba katmanın bir yolu var.
Bir CSS belgesinde, boşluk özelliğiyle atanan satır sonları, boşluklara saygı gösterecek veya Enter tuşuna basacak şekilde yapılandırılabilir. Ön satır değerine sahip beyaz boşluk, tarayıcının metinde Enter görmesine neden olur.
CSS kodunuzda ön-satırı ön-sarma olarak değiştirirseniz, satır kaydırma boşluk içerecektir. Tersine, beyaz boşluk özelliğini, nowrap değerine sahip metne ayarlayarak herhangi bir kaydırmayı devre dışı bırakın:
#wrapper p( renk: #FFF; dolgu: 10 piksel; yazı tipi: kalın 16 piksel Helvetica, sans-serif; beyaz boşluk: nowrap; )
metin taşması
Metinle çalışmak için bir başka kullanışlı araç da metin taşmasıdır. Satır kaydırmaya ek olarak, CSS özelliği, kap dolduğunda içeriğin kırpılmasına izin verir. İki değer alır:
- klip - sadece metni keser;
- üç nokta - bir üç nokta ekler.
Özelliğin çalışması için, öğenin ayrıca satır sonlarını ve gizli bir değerle taşmayı önleyecek şekilde ayarlanması gerekir.
kısa bilgi
CSS sürümleri
| css1 | CSS2 | CSS 2.1 | CSS3 |
|---|---|---|---|
Açıklama
White-space özelliği, kelimeler arasındaki boşlukların nasıl görüntüleneceğini ayarlar. Normal şartlar altında, HTML kodundaki herhangi bir sayıdaki boşluk, bir web sayfasında tek olarak gösterilecektir. İstisna etikettir
Bu kapsayıcıya yerleştirilen metin, kullanıcı tarafından biçimlendirildiği için tüm boşluklarla birlikte görüntülenir. Böylece beyaz boşluk, etiketin nasıl çalıştığını taklit ederAma onun aksine yazı tipini monospace olarak değiştirmez.Sözdizimi
boşluk: normal | şimdi rap | ön | ön hat | ön sarma | miras
değerler
normal Tarayıcı penceresindeki metin her zamanki gibi görüntülenir, satır sonları otomatik olarak ayarlanır. nowrap Boşluklar yoksayılır, HTML kodundaki satır sonları yoksayılır, tüm metin bir satırda görüntülenir; ancak, etiketi ekleyerek
metni yeni bir satıra kaydırır. pre Metin, geliştirici tarafından HTML koduna eklendiği şekliyle tüm boşluklar ve kısa çizgiler dahil olarak gösterilir. Satır tarayıcı penceresine sığmayacak kadar uzunsa, yatay bir kaydırma çubuğu eklenecektir. ön satır Metinde boşluklar dikkate alınmaz, metin belirtilen alana sığmıyorsa otomatik olarak bir sonraki satıra kaydırılır. ön sarma Metindeki tüm boşluklar ve kısa çizgiler korunur, ancak çizginin genişliği belirtilen alana sığmazsa, metin otomatik olarak bir sonraki satıra kaydırılır. inherit Ebeveynin değerini devralır.Değerlerin metne etkisi Tabloda sunulmuştur. bir.
HTML5 CSS2.1 IE Cr Op Sa Fx
Beyaz boşluk Örnek
Fermat'ın Son Teoremi
x n+Y n=Z n
n bir tam sayıdır > 2Bu örneğin sonucu Şekil 2'de gösterilmektedir. bir.
Pirinç. 1. Beyaz boşluk özelliğinin uygulanması
Nesne Modeli
Document.getElementById("elementID ").style.whiteSpace
tarayıcılar
Internet Explorer 7.0 sürümüne kadar ve dahil olmak üzere satır öncesi , ön sarma ve devralma değerlerini desteklemez. İçin