Satırın sonunda css üç nokta. Firefox'ta metin taşması ve her şey, her şey, her şey. Tüm tarayıcılar için son kod

Sabit yükseklik ve genişlikte bir blok içinde görüntülenmesi gereken isteğe bağlı uzunlukta bir metin vardır. Bu durumda, metin tam olarak uymuyorsa, belirtilen bloğa tamamen uyan bir metin parçası görüntülenmeli ve ardından üç nokta ayarlanmalıdır.

Böyle bir görev oldukça yaygındır, aynı zamanda göründüğü kadar önemsiz de değildir.

Bu durumda text-overflow: elips özelliğini kullanabilirsiniz. Bu durumda konteynerin şu özelliğe sahip olması gerekir: taşma eşit gizlenmiş veya klips

Blok ( genişlik: 250 piksel; beyaz boşluk: nowrap; taşma: gizli; metin taşması: üç nokta;)

CSS özelliklerini kullanarak çok satırlı metni kırpmanın ilk yolu sözde öğeler uygulamaktır :önce Ve :sonrasında. HTML işaretlemesine başlayalım

Lorem ipsum dolor sit amet, conectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam Erat volutpat. Enim ve minimum düzeyde olsa da, bu egzersizin her türlü sonucuyla birlikte yapılması gereken bir şey yok. Duis autem vel eum iriure dolor in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui mülayim praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Ve şimdi mülklerin kendileri

Box ( overflow : gizli ; yükseklik : 200 piksel ; genişlik : 300 piksel ; satır yüksekliği : 25 piksel ; ) .box :before ( content : "" ; float : left ; width : 5px ; height : 200px ; ) .box > * :first -child ( float : sağ ; genişlik : 100% ; sol kenar boşluğu : -5px ; ) .box :after ( content : "\02026" ; kutu boyutlandırma : içerik kutusu ; float : sağ ; konum : göreceli ; top : -25px ; sol: %100; genişlik: 3em; sol kenar boşluğu: -3em; sağ dolgu: 5 piksel; metin hizalama: sağ; arka plan boyutu: %100 %100; arka plan: doğrusal degrade (sağa, rgba) (255, 255, 255, 0), beyaz %50, beyaz);)

Başka bir yol da, çok satırlı metin için sütun genişliğini ayarlayan sütun genişliği özelliğini kullanmaktır. Doğru, bu yöntemi kullanırken sonuna bir üç nokta yerleştirmek işe yaramayacaktır. HTML:

Lorem ipsum dolor sit amet, conectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam Erat volutpat. Enim ve minimum düzeyde olsa da, bu egzersizin her türlü sonucuyla birlikte yapılması gereken bir şey yok. Duis autem vel eum iriure dolor in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui mülayim praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Blok (taşma: gizli; yükseklik: 200 piksel; genişlik: 300 piksel;)

CSS çok satırlı metnini çözmenin üçüncü bir yolu Webkit tarayıcıları içindir. İçinde, önekle birlikte birkaç spesifik özelliği aynı anda kullanmamız gerekecek -web kiti. Bunlardan en önemlisi, blokta görüntülenecek satır sayısını belirtmenize olanak tanıyan -webkit-line-clamp'tır. Çözüm güzel ancak sınırlı sayıda tarayıcı grubunda çalışması nedeniyle oldukça sınırlı

Blok ( taşma : gizli ; metin taşması : üç nokta ; görüntüleme : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : dikey ; )

Burada, metnimizin başlangıçta yerleştirildiği ek bir görünmez blok kullanılır, ardından bu bloğun yüksekliği istenen bloğun yüksekliğinden küçük veya ona eşit oluncaya kadar her seferinde bir karakter silinir. Ve sonunda metin orijinal bloğa taşınır.

var bloğu = belge. querySelector(".block"), metin = blok. içHTML, klon = belge. createElement("div"); klon. tarzı. konum = "mutlak"; klon. tarzı. görünürlük = "gizli"; klon. tarzı. genişlik = blok. clientWidth + "px"; klon. içHTML = metin; belge. vücut . AppendChild(klon); var l = metin . uzunluk - 1; for (; l >= 0 && clone .cline.clientHeight >block.clientHeight; -- l) ( clone.innerHTML = text.substring (0, l) + "...";) blok. içHTML = klon . içHTML;

Bu, jQuery için bir eklenti biçimindedir:

(function ($) ( var truncate = function (el ) ( var text = el . text (), height = el . height (), clone = el . clone (); clone . css (( konum: "mutlak" , görünürlük : "gizli" , yükseklik : "otomatik" )); el .after (klon); var l = text .length - 1 ; for (; l >= 0 && clone . height () > height ; -- l ) ( clone . text (text . substring (0 , l ) + "..." ); ) el . text (clone . text ()); clone . kaldır (); ); $ . fn . truncateText = function () ( bunu döndür . her biri (işlev () ( truncate ($ (bu)); )); ); )(jQuery ));

Birçok kişi muhtemelen bazı metinlerin tek satırda görüntülenmesi gerektiğinde sorunla karşı karşıya kalmıştır. Bu durumda metin çok uzun olabilir ve bu metnin bulunduğu bloğun genişliği genellikle en azından tarayıcı penceresinin boyutuyla sınırlıdır. Bu durumlar için, CSS3 önerisinde yer alan text-overflow özelliği icat edildi ve ilk olarak çok uzun zaman önce IE6'da uygulandı. Bu özellik bir blok için kullanılıyorsa, metni bloğun kendisinden daha genişse, metin kesilir ve sonuna bir üç nokta yerleştirilir. Burada her şey o kadar basit olmasa da buna biraz sonra döneceğiz.
Internet Explorer'da her şey açık, peki ya diğer tarayıcılar? Ve metin taşması özelliği şu anda CSS3 spesifikasyonunun dışında bırakılmış olsa da, Safari bunu destekliyor (en azından 3. sürümde), Opera da (9. sürümden beri, ancak özelliği -o-overflow-text olarak adlandırılıyor). Ancak Firefox bunu desteklemiyor, desteklemiyor ve 3. versiyonda bile desteklemiyor. Üzücü ama doğru. Ama belki bir şeyler yapılabilir?

Tabii ki yapabilirsin. İnternette bu özellik ve bununla Firefox'ta nasıl başa çıkılacağı hakkında arama yaptığımda basit bir çözümle karşılaştım. Çözümün özü:

Bu kadar. Ayrıntılar için makaleyi okuyun.
Çözüm fena değil ama sorunlar var:

Öncelikle ikinci soruna odaklanalım, yani gerekmediğinde üç noktanın görüntülenmesini nasıl önleyebiliriz. Beynimi zorladıktan ve "biraz" deney yaptıktan sonra bir çözüm buldum. Açıklamaya çalışacağım.
Sonuç olarak, yalnızca metin genişlikte çok fazla yer kapladığında görünecek olan üç noktalı ayrı bir bloğa ihtiyacımız var. Sonra düşen yüzen bir blok fikri aklıma geldi. Kulağa korkutucu gelse de burada sadece her zaman orada olan ve sağa doğru itilen bir blok anlamına geliyor, ancak metin genişliği genişlediğinde metin bloğu bir sonraki satıra itiyor.
Hadi pratiğe geçelim, yoksa açıklaması zor. HTML yapısını ayarlayalım:

Şimdilik yaptıklarımıza bir göz atalım. İlk önce ana kutunun satır yüksekliğini ve yüksekliğini ayarlıyoruz çünkü kutunun yüksekliğini ve metin satırının yüksekliğini bilmemiz gerekiyor. Elips ile bloğun kenar boşluğu için aynı değeri belirledik, ancak negatif bir değerle. Böylece blok bir sonraki satıra “düşürülmediğinde” metin satırının üstünde (bir satır), bırakıldığında kendi seviyesinde olacaktır (aslında daha aşağıdadır, sadece çekeriz) bir satır yukarı). Fazlalığı gizlemek için, özellikle de üç noktayı göstermemize gerek olmadığında, ana blok için overflow: Hidden komutunu kullanırız, böylece üç nokta çizginin üzerinde olduğunda gösterilmez. Bu aynı zamanda bloğun dışına (sağ kenara) düşen metni kaldırmamıza da olanak tanır. Metnin beklenmedik bir şekilde sarılmasını ve üç noktalı bloğu aşağı ve aşağı itmesini önlemek için, beyaz boşluk: nowrap yapıyoruz, böylece sarmayı yasaklıyoruz - metnimiz her zaman tek satırda olacaktır. Metin içeren blok için, bloğu hemen elips ile boşaltmaması ve minimum genişliği alması için float: left ayarını yaptık. Ana bloğun (DIV.ellipsis) içinde her iki blok da kayan olduğundan (kayan: sol/sağ), metin bloğu boş olduğunda ana blok çökecektir, bu nedenle ana blok için sabit bir yükseklik belirledik (yükseklik: 1,2em) . Ve son olarak, üç noktayı görüntülemek için ::after sözde elemanını kullanırız. Bu sözde eleman için ayrıca arka planı, altında görünecek metinle örtüşecek şekilde ayarladık. Ana blok için bir çerçeve belirledik, bloğun boyutlarını görmek için, onu daha sonra kaldıracağız.
Eğer Firefox, sözde elemanları destekleme konusunda Opera ve Safari kadar konumlandırma (konum/kayan konum vb.) açısından iyi olsaydı, o zaman üç nokta için ayrı bir blok kullanmak zorunda kalmazdık. Son 3 kuralı aşağıdakiyle değiştirmeyi deneyin:

Gördüğünüz gibi metin bloğa sığdığında ortaya çıkan üç nokta probleminden kurtulduk. Ancak yine de bir sorunumuz daha var - metin harflerin ortasında kesiliyor. Üstelik IE'de çalışmıyor. Her ikisinin de üstesinden gelmek için, tarayıcılar için yerel metin taşması kuralını kullanmanız gerekir ve yukarıda açıklanan çözümü yalnızca Firefox için kullanın (alternatifi yoktur). "Yalnızca Firefox için" bir çözümün nasıl oluşturulacağı daha sonra tartışılacaktır, ancak şimdi onu metin taşması kullanarak elimizdeki çözümle çalıştırmaya çalışacağız. CSS'de ince ayar yapalım:

En başta bahsedilen sayfaya bir kez daha baktığımda (bu makaleyi yazmaya başlamadan önce), daha sonra ilgi uğruna, akıllıca ilgili fikirler bulmak için yorumlara baktım. Ve Firefox ve IE'de çalışan başka bir çözümün söylendiği bir yorumda buldum (görünüşe göre bu kişi için ve ilk makalenin yazarı için başka tarayıcılar yok). Dolayısıyla, bu çözümde yazar, gerektiğinde üç nokta koymanın gerekli olduğu öğeler için taşma ve yetersiz akış olaylarına işleyicileri asarak bu olguyla (metin taşması eksikliği) biraz farklı bir şekilde mücadele eder. Fena değil ama bana öyle geliyor ki bu çözüm (kaynaklar açısından) çok pahalı, özellikle de bazı hatalar içerdiğinden. Ancak bunu nasıl başardığını çözerken ilginç bir şeyle, yani -moz-binding CSS özelliğiyle karşılaştı. Anladığım kadarıyla bu, IE'deki davranışın bir benzeri, yalnızca farklı bir sos altında ve daha aniden. Ancak ayrıntılara girmeyeceğiz, yalnızca bu şekilde CSS kullanarak bir öğeye bir JavaScript işleyicisi asabileceğinizi söyleyeceğiz. Kulağa tuhaf geliyor ama işe yarıyor. Biz ne yapıyoruz:

Bu noktada buna son vermek mümkün ama biz çözümümüzü biraz geliştirmek istiyoruz. Bir kurucuyu herhangi bir bloğa asabileceğimize ve buna göre onun üzerinde kontrol sahibi olabileceğimize göre, neden bundan yararlanmayalım? Yapımızı basitleştirelim:

Üçüncü taraf düzeni için küçük bir örnek vereceğim. Wikipedia sayfalarından birinin (ilk ortaya çıkan) içindekiler tablosunu aldım ve yukarıda açıklanan yöntemi ona uyguladım.
Genel olarak, bu çözüme yalnızca bir uzatma ile evrensel denilebilir. Her şey düzeninize ve karmaşıklığına bağlıdır. Bir dosyaya veya belki bir tefe ihtiyacınız olabilir. Çoğu durumda işe yarayacağını düşünüyorum. Ve artık bir başlangıç ​​noktanız var;)
Umarım makaleden ilginç ve faydalı bir şeyler öğrenmişsinizdir;) Öğrenin, deneyin, paylaşın.
İyi şanlar!

Vlad Merjeviç

Büyük diyagonal monitörlerin daha uygun fiyatlı hale gelmesine ve çözünürlüklerinin sürekli artmasına rağmen, bazen çok sayıda metni sınırlı bir alana sığdırma görevi ortaya çıkıyor. Örneğin sitenin mobil versiyonu için veya satır sayısının önemli olduğu bir arayüz için bu gerekli olabilir. Bu gibi durumlarda, metnin uzun satırlarını kesip yalnızca cümlenin başlangıcını bırakmak mantıklıdır. Böylece arayüzü kompakt bir forma getireceğiz ve çıktı bilgisi miktarını azaltacağız. Satır kesmenin kendisi sunucu tarafında aynı PHP kullanılarak yapılabilir, ancak CSS aracılığıyla daha kolaydır ve örneğin fare imlecini üzerine getirdiğinizde her zaman metnin tamamını gösterebilirsiniz. Daha sonra hayali makasla metnin nasıl kesileceğinin yöntemlerini düşünün.

Bu aslında overflow özelliğini gizli bir değerle kullanmakla ilgilidir. Farklılıklar yalnızca metnimizin farklı görünümünde yatmaktadır.

overflow özelliğinin metinle birlikte tüm ihtişamıyla kendini göstermesi için, nowrap değeriyle white-space kullanarak metin kaydırmayı iptal etmemiz gerekiyor. Bu yapılmazsa ihtiyacımız olan hiçbir etki olmayacak, metne kısa çizgiler eklenecek ve bütünüyle görüntülenecektir. Örnek 1, uzun metnin belirli bir stil özellikleri kümesiyle nasıl kırpılacağını gösterir.

Örnek 1. metin için taşma

HTML5 CSS3 IE Cr Op Sa Fx

Metin .size ( white-space: nowrap; /* Metnin sarmasını aç */ taşma: gizli; /* İçeriği kırpın */ arka plan: #fc0; /* Arka plan rengi */ dolgu: 5 piksel; /* Kenar boşlukları */ )

Bu örneğin sonucu Şekil 2'de gösterilmektedir. 1.

Pirinç. 1. Taşma özelliği uygulandıktan sonra metnin görünümü

Şekilden görülebileceği gibi genel olarak tek bir dezavantaj vardır - metnin bir devamı olduğu açık değildir, dolayısıyla kullanıcının bu konuda bilgilendirilmesi gerekir. Bunun için genellikle bir degrade veya elips kullanılır.

Sağdaki metnin bitmediğini netleştirmek için üstüne şeffaftan arka plan rengine doğru bir degrade uygulayabilirsiniz (Şek. 2). Bu, metnin kademeli olarak çözülmesinin etkisini yaratacaktır.

Pirinç. 2. Degrade Metin

Örnek 2 bu etkinin nasıl oluşturulacağını göstermektedir. Öğenin stili pratik olarak aynı kalacak, ancak degradenin kendisi ::after sözde öğesi ve CSS3 kullanılarak eklenecektir. Bunu yapmak için, content özelliği aracılığıyla boş bir sözde öğe ekliyoruz ve ona ana tarayıcılar için farklı öneklerle bir degrade uyguluyoruz (örnek 2). Degradenin genişliğini genişlikten değiştirmek kolaydır, ayrıca 0,2 değerini kendi değerinizle değiştirerek şeffaflık derecesini de ayarlayabilirsiniz.

Örnek 2: Metin Üzerindeki Degrade

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Metin .size ( white-space: nowrap; /* Metnin sarmasını aç */ taşma: gizli; /* İçeriği kırpın */ dolgu: 5 piksel; /* Kenar boşlukları */ arka plan: #fc0; /* Arka plan rengi */ konum: göreceli ; /* Göreli konumlandırma */ ) .size::after ( content: ""; /* Çizim elemanı */ konum: mutlak; /* Mutlak konumlandırma */ sağ: 0; üst: 0; /* Eleman konumu */ genişlik : 40px; /* Degrade genişliği*/ yükseklik: 100%; /* Ana yükseklik */ /* Degrade */ arka plan: -moz-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 %100 ); arka plan: -webkit-linear-gradient(left, rgba(255,204,0, 0,2), #fc0 %100); arka plan: -o-linear-gradient(left, rgba(255,204,0, 0,2), #fc0 %100 ); arka plan: -ms-linear-gradient(sol, rgba(255,204,0, 0,2), #fc0 %100); arka plan: lineer-gradient(sağa, rgba(255,204,0, 0,2), #fc0 %100 ); )

Ayrık içi arpej, çok aralığı dönüştürür; bu, ultra polifonik polifonik kumaştaki tek seferlik dikeydir.

Bu yöntem, degradeleri desteklemediğinden Internet Explorer'ın 8.0 sürümüne kadar olan sürümlerinde çalışmaz. Ancak CSS3'ü terk edebilir ve PNG-24 görüntüsü aracılığıyla eski usul bir degrade oluşturabilirsiniz.

Bu yöntem yalnızca düz arka planlarla çalışır ve arka plan görüntüsü olması durumunda metnin üzerindeki degrade göze çarpacaktır.

Kırpılan metnin sonunda degrade yerine üç nokta da kullanılabilir. Üstelik text-overflow özelliği kullanılarak otomatik olarak eklenecektir. IE'nin eski sürümleri de dahil olmak üzere tüm tarayıcılar tarafından anlaşılmaktadır ve bu özelliğin tek dezavantajı şu ana kadar durumunun belirsiz olmasıdır. Bu özellik CSS3'e dahil edilmiş gibi görünüyor, ancak onunla birlikte gelen kod doğrulamayı geçemiyor.

Örnek 3, üç nokta ekleyen elips değeriyle text-overflow özelliğinin kullanımını gösterir. Fare imlecini metnin üzerine getirdiğinizde metnin tamamı görüntülenir ve arka plan rengiyle vurgulanır.

Örnek 3: Metin taşmasını kullanma

HTML5 CSS3 IE Cr Op Sa Fx

Metin .size ( white-space: nowrap; /* Metnin sarmasını aç */ taşma: gizli; /* İçeriği kırpın */ dolgu: 5 piksel; /* Kenar boşlukları */ text-overflow: elips; /* Üç nokta */ ) .size : vurgulu ( arka plan: #f0f0f0; /* Arka plan rengi */ beyaz boşluk: normal; /* Normal metin sarma */ ) Bilinçdışı kontrasta neden olur, bu Lee Ross tarafından birçok deneyde izlenebilecek temel bir ilişkilendirme hatası olarak tanımlanır. .

Bu örneğin sonucu Şekil 2'de gösterilmektedir. 3.

Pirinç. 3. Üç noktalı metin

Bu yöntemlerin en büyük artısı, metin kısaysa ve belirtilen alana tamamen sığıyorsa degrade ve elipslerin görüntülenmemesidir. Böylece metin ekranda tamamen göründüğünde normal şekilde işlenecek ve öğenin genişliği azaltıldığında kırpılacaktır.

CSS3'ün tanıtımı web tasarımcılarının günlük yaşamında devrim niteliğinde bir değişiklik getiriyor. CSS3 bizi her gün şaşırtmayı asla bırakmıyor. Daha önce yalnızca javascript ile mümkün olan şeyler artık CSS3 ile kolayca yapılabiliyor. Örneğin, Metin Taşması.

Bazen site oluşturma sürecinde bir sonraki satıra geçmeden dinamik metnin bir kısmını gizlememiz gerekir. Yani, sabit genişliğe sahip bir tabloya uzun metin ekleyin. Aynı zamanda metnin görünen kısmının her şey olmadığını kullanıcıya göstermek gerekir. Bir de gizli kısım var. Bu bir üç nokta (...) kullanılarak gösterilebilir.

CSS3'te bunu CSS text-overflow özelliğini kullanarak kolayca yapabiliriz.

işaretleme

metin taşması: üç nokta;

Anlam üç nokta metinden sonra üç nokta (...) eklemenizi sağlar

text-overflow: elips özelliği şu durumlarda kullanışlıdır:

1. Metin hücrenin dışına çıkıyor
2. Hücrede boş alan var: nowrap.

Şirket adını veritabanından görüntülemek için 150 piksel genişliğinde bir div'imiz var. Ancak aynı zamanda uzun firma isimlerinin yeni bir sıraya atlayıp masanın görünümünü bozmasını da istemiyoruz. Yani 150 pikseli aşan metinleri gizlememiz gerekiyor. Kullanıcıyı da bu konuda bilgilendirmek istiyoruz. Yani başlığın tamamının görüntülenmediğini kastetti. Ve fareyi gezdirdiğimizde tüm metni görüntülemek istiyoruz.

Bunu CSS3 ile nasıl yapabileceğimize bir göz atalım.

Şirket paketi ul li (
metin taşması: üç nokta;
taşma: gizli;
beyaz boşluk:nowrap; )

• Firma Adı


• Envestnet Varlık Yönetimi


• Russell Yatırımları


• Kuzeybatı Karşılıklı Finans Ağı


• ING Finansal Ağlar

Tarayıcı desteği

Tarayıcı desteğiyle bu özelliğin küçük bir nüansı vardır. Firefox dışındaki her şey doğru şekilde görüntüleniyor. Ama neyse ki bu soruna bir çözüm var!

Firefox'ta üç nokta

Ne yazık ki Firefox'un geko'su (sayfa oluşturma motoru) bu özelliği desteklemiyor. Ancak bu tarayıcı XBL'yi destekliyor, onun yardımıyla bu durumdan kurtulacağız.

Gecko, Mozilla Firefox, Netscape ve diğer tarayıcılar için ücretsiz bir web sayfası düzeni motorudur. Eski adları "Raptor" ve "NGLayout"tur. Gecko'nun ana konsepti HTML, CSS, W3C DOM, XML 1.0 ve JavaScript gibi açık web standartlarını desteklemektir. Diğer bir kavram ise çapraz platformdur. Gecko şu anda Linux, Mac OS X, FreeBSD ve Microsoft Windows işletim sistemlerinin yanı sıra Solaris, HP-UX, AIX, Irix, OS/2, OpenVMS, BeOS, Amiga ve daha fazlasında çalışmaktadır.

Üç noktayı Firefox'ta görüntülemek için stil sayfasına bir satır eklememiz gerekir.

özelliği devre dışı bırakmak istiyorsanız şunu eklemeniz yeterlidir:

moz-binding: url("bindings.xml#none");

Bir sonraki adım, stil sayfasının depolandığı yerde bir bağlamas.xml dosyası oluşturmaktır. Bunun için herhangi bir metin düzenleyiciyi kullanabiliriz! Aşağıdaki kodu kopyalayın ve dosyayabins.xml adını verin.

document.getAnonymousNodes(bu)[ 0 ]
this.label.style
this.style.display
if(this.style.display != val) this.style.display= val

this.label.value
if(this.label.value != val) this.label.value= val



var strings= this.textContent.split(/\s+/g)
if(!strings[ 0 ]) strings.shift()
if(!strings[ strings.length - 1 ]) strings.pop()
this.value=strings.join(" ")
this.display=dizeler.uzunluk ? "" : "hiçbiri"


this.update()


this.update()

Tüm tarayıcılar için son kod

Şirket paketi ul li (
metin taşması: üç nokta;
-o-text-overflow: üç nokta;
-moz-binding: url("bindings.xml#ellipsis");
beyaz boşluk: şimdirap;
taşma: gizli;
}

CSS3, minimum kodla daha önce görülmemiş web siteleri oluşturmak için dünya çapında web tasarımcısının önde gelen aracı haline geliyor. Daha önce yalnızca Photoshop veya javascript ile mümkün olan basit tek satırlık çözümler var. Bugün CSS3 ve HTML5'in gücünü keşfetmeye başlayın, pişman olmayacaksınız!

Sevgili okuyucular, gri çevirmen kitlesinden sıyrılmak ve sempatinizi kazanmak için derslerimin sonunda bilgece düşünceler ve aforizmalar olacak. Bu satırlardaki herkes kendine ait bir şeyler bulacak :)

Değiştiremeyeceğiniz şeylere onurlu bir şekilde katlanın.

Ürün bağlantılarının uzun adları (her biri üç satır) veya diğer blokların uzun başlıkları bazen ne kadar sinir bozucu oluyor. Her şeyi bir şekilde sıkılaştırmak, daha kompakt hale getirmek mümkün olsaydı ne kadar harika olurdu. Ve fareyle üzerine geldiğinizde başlığı tam olarak gösterin.

Bunu yapmak için favori CSS'miz yardımımıza koşacaktır. Çok basit, bakın.

Diyelim ki bir ürün kataloğundan aşağıdaki bloğumuz var:

İşte yapısı:

Mucize Yudo güç veren akşam, gizemli, sanat. 20255-59

Süper fiyata harika ürün, sadece 100 ruble. Yalnız akşamlarınızı aydınlatın ve canlılık katın!

İşte onun stilleri:

Someblock( border: 1px katı #cccccc; kenar boşluğu: 15px otomatik; dolgu: 10px; genişlik: 250px; ) .header( border-bottom: 1px kesikli; yazı tipi boyutu: 16px; yazı tipi ağırlığı: kalın; kenar boşluğu: 12px ;)

Katılıyorum, berbat görünüyor. Elbette ürünün adını kısaltabilirsiniz. Peki ya yüzlerce ya da binlerce kişi varsa? Kendinizi belirli sayıda karakterle sınırlayarak adın bir kısmını kesmek için php'yi de kullanabilirsiniz. Peki ya düzen daha sonra değişirse ve bloklar daha küçükse veya tam tersi 2-3 kat daha büyükse? Bütün bunlar bir seçenek değil, bütün bunlar bize uymuyor.

Burası CSS'nin ve onun sihirli metin taşması özelliğinin imdada yetiştiği yer. Ancak diğer birkaç özellik ile birlikte uygun şekilde kullanılması gerekir. Aşağıda size hazır bir çözüm göstereceğim, ardından neyin ne olduğunu açıklayacağım.

Dolayısıyla, ürün adlarının manuel olarak düzenlenmesini ve stillerin programatik olarak kırpılmasını bir kenara bırakarak, CSS'yi elimize alıyoruz ve ne elde ettiğimizi görüyoruz:

Mucize Yudo güç veren akşam, gizemli, sanat. 20255-59

Süper fiyata harika ürün, sadece 100 ruble. Yalnız akşamlarınızı aydınlatın ve canlılık katın!

Peki daha mı iyi? Bence çok! Ve fareyi ismin üzerine getirin ... işte! Burada bize tam olarak gösteriliyor.

Yapımızda hiçbir değişiklik olmadı, sadece .header sınıfı, title etiketi ile bir div ekledim. İşte yeni stiller:

Someblock( border: 1px katı #cccccc; kenar boşluğu: 15px otomatik; dolgu: 10px; genişlik: 250px; ) .header( border-bottom: 1px kesikli; yazı tipi boyutu: 16px; yazı tipi ağırlığı: kalın; kenar boşluğu: 12px ; taşma: gizli; metin taşması: üç nokta; beyaz boşluk: şimdi rap; )

Ne yaptığımızı görün:

• Bloğa white-space: nowrap özelliğini ekledik; bu özellik, sözcükleri metinden yeni bir satıra kaydırma ve böylece metni bir satıra genişletme özelliğini ortadan kaldırır;
• Daha sonra çizgimizin görünürlüğünü bloğun genişliğiyle sınırlayan, böylece gereksiz olan her şeyi kesip ziyaretçiye göstermeyen overflow: Hidden özelliğini ekledik;
• Sonunda text-overflow: ellipsis özelliğini kullanarak satırımıza bir üç nokta ekledik, böylece ziyaretçinin bunun satırın sonu olmadığını ve muhtemelen fareyi kaldırıp tam olarak görmesi gerektiğini anlamasını sağladık. .

CSS'yi sevin, CSS öğrenin ve web sitesi oluşturmak size o kadar da zor görünmeyecek =)