üç nokta css. CSS kullanılarak satırın sonundaki üç nokta. Metne Degrade Ekleme

Metnin tamamı belirtilen alana sığmıyorsa bloktaki metnin görünürlüğünü tanımlar. İki seçenek vardır: metin kesilir; metin kesilir ve satırın sonuna bir üç nokta eklenir. text-overflow, bloğun overflow özelliği auto, Scroll veya Hidden olarak ayarlandığında çalışır.

kısa bilgi

Gösterim

	Tanım	Örnek
<тип>	Değerin türünü belirtir.	<размер>
A&&B	Değerler belirtilen sırayla çıkarılmalıdır.	<размер> && <цвет>
bir \| B	Önerilen değerlerden (A veya B) yalnızca birinin seçilmesi gerektiğini belirtir.	normal \| küçük şapkalar
bir \|\| B	Her değer tek başına veya herhangi bir sırayla diğerleriyle birlikte kullanılabilir.	genişlik \|\| saymak
	Değerleri gruplandırır.	[ kırpma \|\| geçmek]
*	Sıfır veya daha fazla kez tekrarlayın.	[,<время>]*
+	Bir veya daha fazla kez tekrarlayın.	<число>+
?	Belirtilen tür, kelime veya grup isteğe bağlıdır.	ek?
(A, B)	En az A'yı tekrarlayın, ancak en fazla B kez tekrarlayın.	<радиус>{1,4}
#	Virgülle ayırarak bir veya daha fazla kez tekrarlayın.	<время>#

Değerler

klip Metin, alana sığacak şekilde kırpılır. üç nokta Metin kesilir ve satırın sonuna bir üç nokta eklenir.

Örnek

metin taşması

Manyetik alan, gök küresinin büyük bir dairesini ihmal edilebilir derecede söndürür, bu durumda yörüngelerin eksantriklikleri ve eğimleri artar.

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

Pirinç. 1. Metnin sonundaki üç nokta

Nesne Modeli

Bir obje.style.textOverflow

Not

Sürüm 11'den önceki Opera, -o-text-overflow özelliğini kullanıyor.

Şartname

Her spesifikasyon birkaç onay aşamasından geçer.

Tavsiye (Tavsiye) - spesifikasyon W3C tarafından onaylanmıştır ve standart olarak tavsiye edilmektedir.
Aday Tavsiyesi ( Olası öneri) - standarttan sorumlu grup, hedeflerini karşıladığından memnundur ancak standardın uygulanması için geliştirme topluluğunun desteği gereklidir.
Önerilen Öneri ( Önerilen öneri) - bu aşamada belge nihai onay için W3C Danışma Kuruluna sunulur.
Çalışma Taslağı - Tartışma ve topluluk incelemesi için yapılan değişikliklerden sonra daha olgun bir taslak.
Editörün taslağı ( Editör taslağı), proje editörleri tarafından değişiklikler yapıldıktan sonra standardın taslak versiyonudur.
taslak ( Şartname taslağı) standardın ilk taslak versiyonudur.

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.

CSS'de tek satırlık metin çeşidi

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'de çok satırlı metin için varyant

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 facili si.

Ve şimdi mülklerin kendisi

Box ( taşma : 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 : right ; width : 100% ; sol kenar boşluğu : -5px ; ) .box :after ( content : "\02026" ; box-sizing : content-box ; float : right ; 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:

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

CSS'de çok satırlı metni çözmenin üçüncü yolu tarayıcılar içindir Web kiti. İçinde, önekle birlikte birkaç spesifik özelliği aynı anda kullanmamız gerekecek -web kiti. Bunlardan en önemlisi -webkit-line-clamp'tır ve blokta görüntülenecek satır sayısını belirtmenize olanak tanı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 ; )

JavaScript'te çok satırlı metin çeşidi

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 ));

Ü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şacak. Çok basit, bakın.

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

İşte yapısı:

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.

Ve burada CSS kurtarmaya geliyor ve sihirli özelliği metin taşması. 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 şey değişmedi, sadece sınıflı bir diva ekledim .başlık başlık etiketi. İşte yeni stiller:

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

Bloğa bir özellik ekledik boşluk: nowrap kelimeleri metinden yeni bir satıra sarma olasılığını ortadan kaldıran, böylece metni bir satıra kadar uzatan;
Daha sonra bir özellik ekledik taşma: gizliçizgimizin görünürlüğünü bloğun genişliğiyle sınırlayan, böylece gereksiz her şeyi kesen ve ziyaretçiye göstermeyen;
Sonunda, özellik aracılığıyla dizimize bir üç nokta ekledik. metin taşması: üç nokta, böylece ziyaretçinin bunun işin sonu olmadığını ve muhtemelen fareyi kaldırıp onu tam olarak görmesi gerektiğini anlamasını sağlar.

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

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:

Metin, mektubun ortasından (nispeten konuşursak) kesilebilir ve onun "güdükünü" göreceğiz.

Üç nokta, metin bloğun genişliğinden daha küçük olsa bile her zaman görüntülenir (yani, bunun dışına düşmez ve üç noktaya gerek yoktur).

Adım bir

Ö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:

çok uzun metin

Çok kompakt değil ama küçültemedim. Yani, bir DIV.ellipsis konteyner bloğumuz, metnimizi içeren bir bloğumuz ve üç nokta içerecek başka bir bloğumuz var. Metni kopyalarken fazladan üç noktaya ihtiyacımız olmadığından "üç nokta kutusu"nun aslında boş olduğuna dikkat edin. Ayrıca ek sınıfların olmamasından da korkmayın, çünkü bu yapı CSS seçiciler aracılığıyla iyi bir şekilde ele alınmıştır. Ve işte CSS'nin kendisi:

.ellipsis ( taşma: gizli; beyaz boşluk: nowrap; satır yüksekliği: 1,2em; yükseklik: 1,2em; kenarlık: 1 piksel düz kırmızı; ) .ellipsis > DIV:first-child ( float: left; ) .ellipsis > DIV + DIV ( kayan nokta: sağ; kenar boşluğu üst: -1,2em; ) .ellipsis >

Bu kadar. Firefox, Opera ve Safari'de amaçlandığı gibi çalışıp çalışmadığını kontrol edip emin oluyoruz. IE'de çok garip ama öngörülebilir bir sonuç. IE6'da her şey gitti ve IE7'de oluşturulan içeriği desteklemediği için çalışmıyor. Ancak daha sonra IE'ye döneceğiz.

Ş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:

.ellipsis > DIV:ilk-çocuk::sonra ( kayan nokta: sağ; içerik: "..."; kenar boşluğu: -1,2em; arka plan rengi: beyaz; konum: göreceli; )

Opera ve Safari'de her şey eskisi gibi ve ekstra üç nokta bloğu olmadan çalışıyor. Ancak Firefox hayal kırıklığı yaratıyor. Ama kararı onun adına veriyoruz. Orijinal HTML yapısıyla yetinmek zorunda kalacaksınız.

ikinci adım

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:

.ellipsis ( taşma: gizli; beyaz boşluk: nowrap; satır yüksekliği: 1,2em; yükseklik: 1,2em; kenarlık: 1px düz kırmızı; metin taşması: üç nokta; -o-text-overflow: üç nokta; genişlik: %100 } .ellipsis * ( görüntü: satır içi; ) /*.ellipsis > DIV:first-child ( float: left; ) .ellipsis > DIV + DIV ( float: right; border-top: -1,2em; ) .ellipsis > DIV + DIV::after ( arka plan rengi: beyaz; içerik: "..."; ) */

Görünüşe göre düzenleme pek fazla değil. Ana bloğun stiline üç satır eklendi. Bunlardan ikisi metin taşması içeriyor. Genişliğin ayarlanması: Metnin bloğu sonsuza kadar genişletmemesi ve text-overflow özelliğinin çalışması için IE için %100 gereklidir; özünde genişliği sınırladık. Teorik olarak DIV, tüm blok öğeleri gibi kabın tüm genişliği boyunca uzanır ve genişlik: %100 işe yaramaz ve hatta zararlıdır, ancak kap her zaman içeriğe uyacak şekilde genişlediğinden IE'nin bir düzen sorunu vardır, bu nedenle başka türlü olamaz. Ayrıca tüm dahili öğeleri satır içi (satır içi) yaptık, çünkü bazı tarayıcılarda (Safari ve Opera) metin taşması, içinde blok öğeler olduğundan, aksi takdirde çalışmayacaktır. Son üç kuralı yorumladık, çünkü bu durumda bunlara ihtiyaç duyulmuyor ve her şey bozuluyor (çatışmalar). Bu kurallara yalnızca Firefox için ihtiyaç duyulacaktır.
Bakalım neler varmış ve devam edelim.

Adı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:

.ellipsis ( taşma: gizli; beyaz boşluk: nowrap; satır yüksekliği: 1,2em; yükseklik: 1,2em; kenarlık: 1 piksel düz kırmızı; text-overflow: elips; -o-text-overflow: elips; genişlik: %100 ; -moz-binding: url(moz_fix.xml#ellipsis); yakınlaştırma: 1;) .ellipsis * ( ekran: satır içi; ) .moz-ellipsis > DIV:ilk çocuk( kayan nokta: sol; Ekran bloğu; } .moz-ellipsis > DIV + DIV( kayan nokta: sağ; kenar boşluğu üst: -1,2em; Ekran bloğu; } .moz-ellipsis > DIV + DIV::after( arka plan rengi: beyaz; içerik: "..."; )

Gördüğünüz gibi yine pek fazla değişiklik yapmadık. IE7'deki bu adımda garip bir aksaklık var, yakınlaştırmayı ayarlamazsanız her şey çarpık oluyor: ana blok için 1 (en kolay seçenek). .ellipsis * veya .moz-ellipsis > DIV + DIV kuralını (IE7 ile hiçbir ilgisi olmayan) kaldırırsanız (silerseniz, yorum yapmazsanız), aksaklık ortadan kalkar. Bütün bunlar çok tuhaf, eğer biri neyin yanlış olduğunu biliyorsa bana bildirin. Şimdilik zoom: 1 ile idare edelim ve Firefox'a geçelim.
-moz-binding özelliği, moz_fix.xml dosyasını tanımlayıcı üç noktaya sahip bir talimatla bağlar. Bu xml dosyasının içeriği aşağıdaki gibidir:

Bu yapıcının yaptığı tek şey moz-ellipsis sınıfını seçicinin çalıştığı öğeye eklemektir. Bu yalnızca Firefox'ta (gecko tarayıcıları?) çalışacaktır, dolayısıyla yalnızca moz-ellipsis sınıfı öğelere eklenecektir ve bu sınıf için ek kurallar ekleyebiliriz. Ne için çabalıyorlardı. this.style.mozBinding = "" ihtiyacından tam olarak emin değilim, ancak ifade deneyimime dayanarak bunu güvenli bir şekilde oynamak daha iyidir (genel olarak Firefox'un bu tarafına aşina değilim, bu yüzden yanılmış olabilirim) ).
Bu tekniğin genel olarak harici bir dosya ve JavaScript kullandığı konusunda uyarılmış olabilirsiniz. Korkmamalısın. İlk olarak, eğer dosya yüklenmemişse ve/veya JavaScript devre dışı bırakılmışsa ve çalışmıyorsa sorun değil, kullanıcı sadece sondaki üç noktayı görmeyecektir, metin bloğun sonunda kesilecektir. Yani bu durumda "göze çarpmayan" bir çözüm elde ediyoruz. Kendin görebilirsin.

Böylece, Büyük Dört tarayıcı için Opera, Safari ve IE için metin taşması uygulayan ve bunu Firefox için taklit eden bir stil elde ettik, çok sıcak değil ama hiç yoktan iyidir.

Adım dört

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:

çok uzun metin

Ah evet! Sanırım benimle aynı fikirde olacaksın - ihtiyacın olan şey bu!
Şimdi stildeki tüm gereksizleri kaldıralım:

.ellipsis ( taşma: gizli; beyaz boşluk: nowrap; satır yüksekliği: 1,2em; yükseklik: 1,2em; text-overflow: elips; -o-text-overflow: elips; genişlik: %100; -moz-binding: url(moz_fix.xml#ellipsis); ) .moz-ellipsis > DIV:first-child ( float: left; ) .moz-ellipsis > DIV + DIV ( float: right; kenar boşluğu: -1,2em; ) .moz -ellipsis > DIV + DIV::after ( arka plan rengi: beyaz; içerik: "..."; )

Sonunda kırmızı sınırı kaldırdık :)
Şimdi moz_fix.xml dosyamıza biraz ekleyelim:

Burada neler oluyor? Başlangıçtaki HTML yapımızı yeniden oluşturuyoruz. Yani bloklarla ilgili bu zorluklar otomatik olarak ve yalnızca Firefox'ta yapılır. JavaScript kodu en iyi geleneklerle yazılmıştır :)
Ne yazık ki, metnin mektubun ortasında kesilmesi durumundan kaçınamayız (belki de geçici olarak da olsa, çünkü benim çözümüm hala çok ham ve gelecekte ortaya çıkabilir). Ancak bu etkiyi biraz yumuşatabiliriz. Bunun için bir görsele (şeffaf degradeli beyaz bir arka plan) ve stilde birkaç değişikliğe ihtiyacımız var:

.moz-ellipsis > DIV:ilk-çocuk ( float: left; sağ kenar boşluğu: -26px;) .moz-ellipsis > DIV + DIV ( kayan nokta: sağ; kenar boşluğu üst: -1,2em; arka plan: url(ellipsis.png) tekrar-y; sol dolgu: 26px; }

İzleyin ve hayatın tadını çıkarın.

Buna bir son verelim.

Çözüm

Üçü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 anlatılan 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!