HTML ve CSS ile Varsayılan Metin Kaydırma Nasıl Değiştirilir

Kağıttan farklı olarak web sayfaları neredeyse sonsuz yana doğru uzanır. Etkileyici olduğu kadar, okurken gerçekten ihtiyacımız olan bir şey değil. Tarayıcılar, metin kabının genişliği ve ekranın genişliği böylece tüm metni yanlara kaydırmak zorunda kalmadan görebiliriz (yalnızca aşağı doğru).

Sarma tarayıcıların, metnin dili veya noktalama işaretlerinin ve boşlukların yerleştirilmesi gibi birçok faktörü göz önünde bulundurarak yaptıkları bir şeydir. sadece aşağı itme metin içeriği için tanımlanan kutuya sığmayan şey.

Kaydırma dışında, tarayıcılar da boşluklara dikkat et; kaynak kodunda art arda gelen boşlukları, işlenen sayfadaki tek bir boşlukta birleştirir ve ayrıca sarma üzerinde çalışmaya başlamadan önce zorunlu satır sonlarını kaydeder.

Varsayılan metin kaydırma ne zaman değiştirilir

Hepsi harika ve çok takdir ediyorum. Ancak, varsayılan tarayıcı davranışının aradığımız şey olmadığı durumlarda kolayca sona erebiliriz. Bu bir başlık olabilir sarılmamalı veya paragraftaki bir kelimeyi çizgiyi aşmaktan daha iyi kırılmak, çizginin sonunda tuhaf görünen boş bir alan bırakarak.

Ayrıca umutsuzca başarabiliriz. metnimizde korunan alanlara ihtiyacınız var, ancak tarayıcı onları bir araya getirmeye devam ediyor, bizi birden fazla eklemek için zorluyor kaynak kodunda.

Sarma tercihleri ​​ayrıca metnin dili ve amacı ile değişim. Bir Mandarin haber makalesi ve bir Fransız şiiri mutlaka aynı şekilde sarılması gerekmez.

Olabilecek çok sayıda CSS özelliği (ve HTML öğeleri!) Vardır. sargı ve kesme noktalarını kontrol etme ve ayrıca kaydırmadan önce boşlukların ve satır kesmelerinin nasıl işlendiğini tanımlayın.

Yumuşak sargı fırsatları ve yumuşak sargı kırılmaları

Tarayıcılar taşan bir metnin nereye sarılacağına karar verir sözcük sınırlarına, kısa çizgi, hecelere, noktalama işaretlerine, boşluklara ve daha fazlasına bağlı olarak. Bu yerlerin hepsi denir yumuşak sarma olanakları Tarayıcı metni böyle bir yerde kırdığında, ara bir yumuşak şal kırılma.

En basit yol fazladan bir mola vermek Eski güzel kullanılarak yapılabilir
eleman.

Beyaz boşluk

Eğer aşina iseniz Beyaz boşluk Bahse girerim CSS özelliği ilk önce diğerleriyle aynı şekilde tanımaya başladınız; bir yol ararken metnin sarılmasını engelle. nowrap değeri Beyaz boşluk tam olarak yapar.

Ancak Beyaz boşluk mülk sadece sarmadan daha fazlasıdır. Her şeyden önce, boşluk nedir? Bu bir boşluk karakter kümesi. Kümedeki her alan birbirinden değişir uzunluk, yön veya her ikisi de.

Tipik bir tek yatay boşluk karakteri boşluk tuşu tuşuna basarak eklediğimiz şeydir. Sekme tuşu ayrıca bir benzer alan ancak daha büyük uzunluk. Enter tuşunu ekler dikey boşluk yeni bir satır başlatmak HTML’de bir tek kırılmaz alan web sayfalarına. Bunun gibi, çok fazla alan var “Beyaz boşluk”.

Daha önce de belirttiğim gibi, tarayıcılar birden çok alanı daralt (hem yatay hem de dikey) kaynaktaki tek bir boşlukta. Onlar ayrıca kaydırma fırsatları için bu boşluk karakterlerini göz önünde bulundurun kaydırma gerektiğinde (bir metnin sarılabildiği yerler).

Ve tam olarak kontrol edebileceğimiz bu tarayıcı eylemleri. Beyaz boşluk. Unutmayın Beyaz boşluk mülk her türlü alanı etkilemez, sadece en sık olanları normal yatay tek boşluk, sekme boşluğu ve satır beslemeleri gibi.

Aşağıda, örnek bir metnin ekran görüntüsünü görebilirsiniz. tarayıcı tarafından kabına sığacak şekilde sarılmış. Taşma kabın altında olur ve taşma metni farklı renktedir. Fark edeceksiniz ardışık boşlukların çöküşü kodda.

 
 âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba A¢A ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. 

 .textContainer width: 500px; yükseklik: 320px;  

Uyguladıktan sonra beyaz boşluk: nowrap; kural, metnin kaydırılması şu şekilde değişir:

 .textContainer / *… * / beyaz boşluk: nowrap;  

önceden değeri Beyaz boşluk tüm boşlukları korur ve metnin sarılmasını önler:

 .textContainer / *… * / beyaz boşluk: pre;  

pre-wrap değeri Beyaz boşluk tüm boşlukları korur ve metni sarar:

 .textContainer / *… * / beyaz boşluk: ön sarma;  

Sonunda, Ön hat değeri Beyaz boşluk dikey boşlukları korur yeni çizgiler ve metni sarar:

 .textContainer / *… * / beyaz boşluk: ön satır;  

Kelime sonları

Metin kaydırmayı denetlemek için bilmeniz gereken bir diğer önemli CSS özelliği de word-break. Yukarıdaki tüm ekran görüntülerinde tarayıcının görebildiğini görebilirsiniz. metni kelimeden önce sarılmış “Merhaba” sağ tarafta, ötesinde taşan metin. Tarayıcı kelimeyi kırmadım.

Ancak, eğer zorunda kelimelerin harflerin kırılmasına izin ver Metnin sağ tarafa bile bakması için kullanmanız gerekir. break-hepsi değeri word-break özelliği:

 .textContainer / *… * / word-break: break-all;  

word-break mülkün yanında üçüncü bir değeri var break-hepsi ve normal (varsayılan satır kesmeye ait). hepsini tut değer kelimelerin kırılmasına izin vermiyor.

Etkisini görmek mümkün olmayabilir hepsini tut İngilizcede. Ancak, bir sözcükteki harflerin bulunduğu dillerde kendi başlarına anlamlı birimler, tarayıcı kaydırma yaparken kelimeleri kırabilir ve bu kullanımı önlenebilir hepsini tut.

Örneğin, Korece sözcüklerdeki harfler, başlangıçta ambalajlama için kırıldı, bir arada tutulur ne zaman beyaz boşluk: hepsini sakla; kural belirtildi.

ìA ?? ¸ê³ ?? A «Â¥Â¼ A-A-Â¥A-A ?? a ?? à «Â ??  ?? Ã- ??  ??, ì ??  à «Â ??  ?? ì½??  ??  ?? à «Â« A A¡A ?? A-A ??  ?? â¬Â ?? A-A¬Â ?? a ?? â¬A ?? ¤. ìà  ?? 10Ã- ??  ?? ì ??  à «Â ??  ?? ì½ ?? A «a ?? a ?? êµA-A¬Â  ?? A-A ??  ?? â¬Â ?? a ?? âªÂ °  ?? 1997à «Â…  ?? 3 A¬A ?? a ?? 10 A¬A ?? ¼à «Â¶Â ?? Ã- ??  ° 12ìA ?? ¼ê¹ ?? â¬Â§A ?? à «Â ?? Â… ìA ?? ¼ìA ?? a ?? à «Â§Â ?? â¬A ?? ¸ì¦ ?? â¬A-A ?? â¬A ?? a ?? ìA-A´Ã «Â¦Â½Ã «Â ??  ?? ë  ?? ¤. 짠?? âªÂ¸A ?? A «a ??  ± a« ¡ ?? A-A ??  ?? â¬Â ?? A-A¬Â ?? a ?? â¬A ?? ¤. ìA ?? ´ A-A ??  ?? â¬Â ?? a ?? â¬A-A ?? â¬Â ??  ?? à «Â ??  ?? ìÂ-Â… ê³A ?? ì  ?? à «Â °  ?? ìA ?? a ?? ì  ?? à «Â¬Â¸ÃªÂ °  ?? â «a ?? ¤ìA ?? ´ A-A ?? ¨ê »Â ?? à «ÂªÂ¨Ã¬A-A¬ A «a ?? ¤ì ?? a ?? âªÂ³Â¼ ê °  ?? â¬A ?? a ?? à «Â¶Â ?? â¬A ?? ¼à «Â¥Â¼ A «a ?? ¤à «Â £ ¹à «Â ??  ?? ë  ?? ¤.

 .textContainer / *… * / word-break: keep-all;  

Bu özellik adı verilen başka bir değeri destekleyebilir. break-word gelecekte. Nasıl olduğunu göreceksiniz break-word sonra çalışır “Taşma şal” bu yazının bölümü.

Kelime sonu fırsatları

Geliştiriciler ayrıca kelimelerin içine sarma olanakları ekleyin, kullanmak HTML elemanı. Bir tarayıcının bir metin dizesini kaydırması gerekiyorsa, bir sarma fırsatı için mevcut.

 
 âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? 'Hello âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. âA ?? a ?? Merhaba. 
 

 .textContainer / *… * / beyaz boşluk: ön sarma;  

olmadan , bütün “Merhaba” kelime yeni bir satırda oluşturulmuş olurdu. Toplayarak HTML koduna, tarayıcıyı Kaydırma için bu noktada kelimeyi kırmak sorun değil, gerekli olması durumunda.

tire

tire CSS özelliği: harfler arasındaki boşlukları kontrol etmenin başka bir yolu Bir kelimeyle. İlgileniyorsanız CSS heceleme ile ilgili ayrı bir makalemiz var. Kısacası, özellik size sağlar tirelemeyle sarma olanakları oluşturma.

Onun Oto değer tarayıcıyı yönlendirir otomatik olarak tirelemek ve gerektiğinde kelimeleri kesmek kaydırma yaparken Manuel değer tarayıcıları zorlar eklediğimiz heceleme fırsatlarına (gerekirse) sarın, kısa çizgi karakteri gibi (‐) veya ­ (yumuşak kısa çizgi). Eğer Yok orada olacak bir değer olarak verildi tire yakınında sarma yapılmaz.

 
 mavi deniz feneri mavi deniz feneri 
 

 .textContainer / *… * / -webkit-hyphens: auto; -ms-tireler: otomatik; tire: otomatik;  

Taşma şal

taşma-wrap CSS özelliği, eğer bir tarayıcı kelimeleri kırabilir (veya yakın gelecekte gerçekleşebilecek olan korunmuş alanlar) taşma. Ne zaman break-word değeri verildi taşma-wrap, kelime kırılacak bu durumda başka hiçbir yumuşak sarma fırsatı bulunamadı çizgide.

Bunu not et taşma-wrap olarak da bilinir sözcük kaydırma (takma adlar).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

 .textContainer / *… * / taşma-sarma: break-word;  

Yukarıdaki HTML kodundaki harfler arasında boşluk bırakılmadan (yani, sarma olanağı yoktur), metin ilk başta sarılmamıştır ve tek bir kelime olarak korundu.

Ancak, metni sözcükleri kırarak kaydırma izni verildiğinde (örneğin, break-word değer verildi taşma-wrap) sarma tüm dizeyi kırarak oldu gerekli olan her yerde.