Css zorunlu sözcük kaydırma. Uzun kelimeleri CSS ile sarmak

İnternet içerikten oluşur, içerik kelimelerden oluşur ve kelimeler çok, çok uzun olabilir. Ve er ya da geç, bir web yöneticisi uzun kelimelerin tirelenmesi sorunuyla karşı karşıya kalır. Bu sorun özellikle duyarlı tasarım ve küçük içerik blokları için geçerlidir. Peki bu sorunla nasıl başa çıkıyorsunuz?

Tire

Uzun sözcükleri tirelemenin ilk çözümü kısa çizgi kullanmaktır.

Defisi (-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; tireler: auto;)

Tarayıcı Desteği: CSS tireleri, Chrome, Opera, Android hariç hemen hemen tüm modern tarayıcılar tarafından desteklenir. Ayrıca, çoğu zaman dilbilgisi açısından yanlış olan yerlere kısa çizgi eklenir.

kelimeyi kes

Kelime sonu, kelimelerin içindeki satırların kesilip kesilmeyeceğini belirten bir CSS özelliğidir.

Obriv-slova (-ms-kelime sonu: kelime sonu: kelime sonu: kelime sonu; kelime sonu: kelime sonu;)

Tarayıcı desteği: Kelime sonu, Opera Mini ve Opera'nın eski sürümleri dışındaki tüm tarayıcılarda desteklenir.

taşma sarmalayıcı

Bir sonraki çözüm, taşma sarma kullanmaktır.

Obertka-perepolneniya (kelime kaydırma: kesme kelimesi; taşma sarma: kesme kelimesi;)

Tarayıcı Desteği: Hemen hemen tüm tarayıcılarda desteklenir. Not: Bazı tarayıcılar, "taşma kaydırma" yerine "kelime kaydırma" kullanımını gerektirir.

üç nokta

Başka bir seçenek de üç nokta kullanmaktır.

Mnogotochiye (taşma: gizli; beyaz boşluk: nowrap; metin taşması: üç nokta;)

Tarayıcı Desteği: Tüm modern tarayıcılar tarafından desteklenir.

Bu çalışan bir yöntemdir, ancak ideal olmaktan uzaktır.

Son çözüm: Taşma ve Tire Sarmalayıcısını Kullanma.

Finalnoye-resheniye (taşma-kaydırma: kesme-kelime; kelime-kaydırma: ara-kelime; -webkit-tire: otomatik; -ms-tire: otomatik; -moz-tire: otomatik; kısa çizgi: otomatik;)

Bu çözüm, onu destekleyen tarayıcının kısa çizgi eklemesine ve desteklemeyen tarayıcılar için satır sonu eklemesine olanak tanır.

Uzun sözcüklerin nasıl kaydırılacağını belirleyin:

1. yalnızca tire, boşluk veya Enter (kesilmeyen boşluk ve bölünmeyen tire - hariç) olduğunda. Bir kelimenin bölümleri arasına (örneğin, kırmızı ve sarı), kelimelerin arasına bir tire yazılır - bir tire. "Yumuşak tire" - yalnızca tireleme gerektiğinde görünür. Sözcük ebeveynin kapsamı dışındaysa, o zaman veya bir kısmını kısa çizgi olmadan aktarır. Eksi, matematiksel ifadelerde kullanılır (örneğin, 5 - 2). Telefon numaralarında dijital bir hat görüntülenir (örneğin, +7 800 000‒00‒00). Ve tüm bunlar o kadar tanıdık değil - klavyede.
2. herhangi bir karakterden sonra
3. otomatik tireleme ile Rus dilinin kurallarına göre.

taşma sarma
sözcük kaydırma
kelime sonu
satır sonu
kısa çizgiler

bin dokuz yüz doksan dokuz kilomuz zaten yeniden incelendi grubber-buldozer-yükleyici

Bir mülk ile diğeri arasındaki fark nedir

Varsayılan olarak, uzun sözcükler bir tire ile açıkça belirtilmedikçe tirelenmez ve yeni bir satırda başlar.

Gözle hemen görülebilen satırları yok saymak için word-break: keep-all; ...

Tarayıcının yumuşak kısa çizgiye dikkat etmesini önlemek için kısa çizgi ekleriz: yok; ...

Sözcük kaydırma gerekliyse, sözcük kaydırma: kesme sözcüğü; Tüm tarayıcılar tarafından anlaşıldığı için her zaman kullanmanızı tavsiye ederim. Sözcük kesmeden farklıdır: her şeyi kesme; bloğa sığmayan kelimelerde öncelik verilir ve yeni bir satırdan başlar ve yumuşak kısa çizgi önerisine uyulur.

Birlikte kullanıldığında, sözcük kesme: tümünü kesme; tire ile: otomatik; , ikincisi göz ardı edilir. tireler: otomatik; uygun gördüğü herhangi bir kısa çizgi koyar. Ancak çalışması için div'de lang = "ru" niteliğini belirterek dilinizi belirtmeniz gerekir.

Kelimeleri başka bir satıra sarma

Diyelim ki bir menü öğesi veya düğmesi parçalanırsa iyi görünmüyor. Bu nedenle, ayrılmalarını yasaklamak gerekir. Bunun için yukarıdaki özelliklerin tümü "varsayılan" moda ayarlanıp eklenmelidir. Tıklayın ve poligonumuza bakın.

Kısa çizgi olduğunda sözcük kaydırmayı kontrol edin: auto;

tetrahidropiranilsiklopentiltetrahidropiridopiridin

Herkese merhaba). Düzende size bir şekilde yardımcı olabilecek css dilinin çeşitli kullanışlı özellikleri hakkında yazmaya devam ediyorum. Ve bugün size, eğer konteynırınıza sığmıyorsa kelimeleri css içine nasıl saracağınızı anlatmak istiyorum. Size her şeyi gerçek bir örnekle göstereceğim.

Uygun olmayan kelimeler için tirelemeyi aç

Diyelim ki 100 piksel genişliğinde bir bloğum var ve içine biraz metin yazmam gerekiyor. Metinde “ kendiliğinden açılan". Bu bir arşiv, örneğin) Ama mesele bu değil. Kelime çok uzun, sadece kabın genişliğine sığmıyor. Böyle dar bir blokta (100 piksel) yazalım. Ne olacak?

Gördüğünüz gibi, zavallı kelime konteynırdan çıktı, peki, gidecek hiçbir yeri yok, ne yapabilirsiniz. Ve bu girintisiz. Yani, burada kelime sarma özelliği kurtarmaya geliyor. Kelime kaydırmayı etkinleştirmek için bir bloğa sormanız gerekenler:

Kelime kaydırma: kelime kesme;

Ve ikna etmek için dolgu da ekleyebilirsiniz. Yani özelliği uyguladıktan sonra çok uzun kelimelerin harf harf başka bir satıra sarılacağını görüyoruz. Üstelik ikinci satır bir kelimeye yetmese bile geri kalanı üçüncü satıra aktarılacak vb.

Gayrimenkulün güvenle kullanılabileceğini belirtmek isterim. İlk olarak, bugün tarayıcılarda harika çalışıyor. İkincisi, akıllıca çalışır. Yani tüm normal kelimeler için tireleme olmayacak, tüm kelimeler bir sonraki satıra aktarılacak, böylece okunabilirlik bozulmayacaktır. Bu ekran görüntüsünde görebilirsiniz.

Kelime kaydırma ne zaman kullanılır?

Aslında, şimdiye kadar 2 kullanım durumu görüyorum. Birincisi sadece dar bloklar içindir, burada uzun kelimelerin bloktan çirkin bir şekilde sürünerek çıkmasından korkarsınız. İkincisi, tasarımcının sitenin adının birkaç satırda olması gerektiği şekilde tasarladığı zamandır.

Bu yazımızda css ile word wrap yapmayı öğrendik. Bugün benim için bu kadar. Görüşürüz.

Herkese merhaba ve başlayalım. Diyelim ki aşağıdaki metne sahibiz:

Birleşik Arap Emirlikleri hükümeti ve yönetimi, bilim ve teknolojinin en son başarılarına dayanan en yeni teknolojileri bu şehirde yoğunlaştırıyor ve sanki bir bilim kurgu filminin ekranından çıkmış gibi geleceğin şehrini döndürmeye çalışıyor. Bu teknolojiler arasında polis robotları, robotik arabalar ve Hyperloop ulaşım sistemi yer alıyor ve çok uzak olmayan bir gelecekte Dubai'de otomatik bir uçan taksi hizmeti çalışmaya başlayacak. Ve bu etkinliğe hazırlık olarak, taksi olarak kullanılacak 18 rotorlu elektrikli iki kişilik Volocopter, ilk uçuşunu otomatik modda yaptı, yazıyorlar ...

burada şimdi çalışmaya başlayacağımız bazı metinleri belirttik.

Ve ele alacağımız ilk özelliğe kelime sonu denir.

kelime sonu: normal | hepsini sakla | her şeyi kırmak

Biz esas olarak bu özelliğin normal olan iki değeriyle ilgileniyoruz - bu kelime kaydırmayı ayarladığımız varsayılan değer ve her şeyi kesme karakter karakter gerçekleştirilir. Hepsini tut için bu değer, Çince, Japonca ve Korece sözcükleri sarmak için kullanılır.

P (kelime sonu: tümünü kes ;.)

Lütfen bu stili uyguladıktan sonra, tüm metnimizin mevcut tam genişliğe kadar uzatıldığını ve tirelemenin kelimelerle değil, karakterlerle yapıldığını unutmayın. Bu özellik, verilen genişliğe uymayan çok uzun bir kelimemiz olduğunda faydalı olabilir. Bununla birlikte, bu bir tür rahatsızlık yaratır, çünkü kesinlikle tüm kelimeler, belirli bir genişliğe uyanlar bile, karakter karakter aktarılır.

Neyse ki, sadece uygun olmayan kelimeleri karakterler üzerinden aktaran benzer bir özellik var. Buna taşma sarma denir:

P (taşma sarma: kesme sözcüğü;)

ve break-word değerini uyguladıktan sonra, tüm metnimiz kelimelerle sarılır ve verilen genişliğe uymayan kelimeler karakter karakter sarılır. Görev tamamlandı diyebiliriz! Break-word değerine ek olarak, bu özellik şunları kabul eder:

taşma sarma: normal | ara kelime | miras;

Şimdi metinde kelime kaydırma için daha gelişmiş css özelliğine geçelim.

Metnin kendisini monospace olarak değiştirmeden ön etiketin çalışmasını simüle edebileceğimiz beyaz boşluk özelliğini düşünün.

boşluk: normal | şimdi rap | ön | ön hat | ön sarma | miras

Aslında bu özelliği kullanarak metinde sadece boşluklarla çalışıyoruz. Örneğin, metnimize aşağıdaki stili uygularsak:

Beyaz boşluk: nowrap;

tüm satır sonları yok sayılacak ve metnimiz tek satır olarak görüntülenecektir.

Beyaz boşluk: ön;

Pre durumunda, tüm satır sonları kaynak koddakiyle aynı olacaktır. Ayrıca, metin belirtilen genişliğe sığmazsa, sarılmaz. Taşınmasını istiyorsak, satır öncesi değerini belirtmemiz gerekir.

Kaynak kodda sadece satır sonlarını değil, aynı zamanda kelimeler arasındaki boşlukları da hesaba katmak istiyorsak, şunu belirtmemiz gerekir:

Beyaz boşluk: ön sarma;

Temelde size css kullanarak kelime kaydırma hakkında söylemek istediğim tek şey bu. Umarım bu makale sizin için yararlı olmuştur ve edindiğiniz bilgileri bir kereden fazla kullanacaksınız.

Pekala, sana veda ediyorum. Size başarılar ve iyi şanslar diliyorum! Hoşçakal!

Düzen sırasında yayıncıların periyodik olarak bir sorusu vardır: metin aktarımı nasıl gerçekleştirilecek? Çoğu durumda, tarayıcı bu görevi kendi başına gerçekleştirir. Ancak bazen, özellikle yanlış hecelenirse anlamlarını yitirecek uzun kelimeler ve ifadeler tasarlayarak bu sürecin kontrol altına alınması gerekir.

Kelime kaydırma özelliği

HTML'de dizeleri ayırmak için özel bir etiket vardır.
... Ancak, çok sık kullanımı geliştiriciler arasında kötü bir 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ştiriciye bir kültür şoku verecek hantal ve çirkin bir koddur. Peki ya logonun masaüstü sürümünde yatay, ekran genişliği 550 pikselden az olduğunda dikey olmasını istiyorsanız? Bu nedenle, öğelerin görünümünü özelleştirmek için her zaman basamaklı stil sayfaları kullanın. Üstelik CSS araçları yardımıyla satır sonları daha şık bir şekilde yapılıyor. Aynı zamanda, yalnızca sayfa yükleme hızını yavaşlatan aşırı bir işaretleme yoktur.

Kelime işleme için bakılacak ilk özellik kelime kaydırmadır. Üç değeri kabul eder: normal, tümünü kes ve tümünü 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, CSS belgesinde satır kesmeye izin verilmediği anlamına gelir. Çince, Japonca ve Korece karakterler için özel olarak tasarlanmıştır. Bu nedenle, bu dillerden herhangi birinde blog yazmayacaksanız, mülk sizin için yararlı olmayacaktır. Ayrıca Safari tarayıcısı ve iOS cep telefonları tarafından desteklenmemektedir.

CSS kullanarak önceki örnekteki logoya her harfe bir satır sonu 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ı tipinin genişliği ve boyutu, yalnızca bir harf için yeterli alan olacak şekilde seçilir. Tümünü kesme değerine sahip sözcük kaydırma, 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 metin içeren küçük bloklar tasarlarken, örneğin yorum girmek için alanlar tasarlarken kullanışlıdır.

Beyaz boşluk özelliği

Acemi web geliştiricileri için 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'a ne kadar basarsanız basın, tarayıcı bunu görmezden gelecektir. Ancak, metni istediğiniz şekilde ve tüm boşlukları hesaba katarak görüntülemesini sağlamanın bir yolu var.

Bir CSS belgesinde, boşluk özelliği kullanılarak atanan satır sonları, boşlukları hesaba katacak şekilde yapılandırılabilir veya Enter tuşuna basılabilir. Ön satır değerine sahip beyaz boşluk, tarayıcıyı metinde Enter'ı görmeye zorlar.

CSS kodunuzda ön satırı ön sarma olarak değiştirirseniz, satır sonları boşlukları hesaba katacaktır. Tersine, beyaz boşluk özelliğini, nowrap değerine sahip metne atayarak herhangi bir tirelemeye izin vermeyin:

#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 sonlarına 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 - üç nokta ekler.

#wrapper p (renk: #FFF; dolgu: 10 piksel; yazı tipi: kalın 16 piksel Helvetica, sans-serif; metin taşması: üç nokta; / * Üç nokta ekle * / beyaz boşluk: nowrap; / * Satır kaydırmayı devre dışı bırak * / taşma: gizli; / * Konteynerin dışındaki her şeyi gizle * /)

Özelliğin çalışması için, öğeye ayrıca satır sonu ve gizli değerle taşma atanmalıdır.