Bloğun kesilmesi yerine gölgeler görünüyor. Uzun metni kırpmak için CSS nasıl kullanılır? Neyden korkuyoruz?

Vlad Merjeviç

Büyük diyagonal monitörlerin gittikçe daha erişilebilir hale gelmesine ve kullanılabilirliklerinin giderek artmasına rağmen, sınırlı alanda çok fazla metni barındıracak bir sorun var. Örneğin bir sitenin mobil versiyonu için veya satır sayısının önemli olduğu bir arayüz için gerekli olabilir. Bu gibi durumlarda, uzun metin satırlarını keserek, yalnızca önermenin başlangıcını mahrum etme duygusu ortaya çıkar. Bu şekilde arayüzü kompakt bir forma getireceğiz ve görüntülenen bilgileri hızlı bir şekilde kullanacağız. Satırların kesilmesi sunucu tarafında aynı PHP kullanılarak veya CSS aracılığıyla daha basit bir şekilde yapılabilir ve artık örneğin fare yeni bir imlecin üzerine getirildiğinde tüm metni görüntüleyebilirsiniz. Daha sonra düz makasla metin kesme yöntemlerine bakacağız.

Gerçekte her şey gizli değerlerden taşmanın gücüne bağlıdır. Metnimizin çeşitli temsillerinde bu anlam artık belirgin değildir.

vikoristamo taşması

Taşmanın gücünün metinle tüm güzelliğiyle kendini göstermesi için metni nowrap değerlerinden ek beyaz alana aktarmak gerekir. Bu yapılmazsa ihtiyacımız olan etki yaratılmayacak, metne transferler eklenecek ve metnin tamamı görüntülenecektir. Ek 1, bir dizi stil yönergesi kullanılarak uzun metnin nasıl kırpılacağını göstermektedir.

Örnek 1. metin için taşma

HTML5 CSS3 IE Cr Op Sa Fx

Şekil 2'de popoya verilen okumaların sonucu. 1.

Küçük 1. Elektrik taşması kesildikten sonra metnin görünümü

Küçükten de görebileceğiniz gibi, sadece bir kısa hikaye var - metnin devam edip edemeyeceği belli değil, bu yüzden gerçeği anlamak için bir tarihe ihtiyaç var. Bu amaçla bir degradeye veya üç beneğe ihtiyaç vardır.

Metne degrade ekleme

Sağ taraftaki metnin bitmeyeceğini daha açık hale getirmek için, üzerine açık renkten arka plan rengine kadar bir degrade yerleştirebilirsiniz (Şek. 2). Bu durumda metnin adım adım yok edilmesi etkisi ortaya çıkacaktır.

Küçük 2. Degradeli metin

Uygulama 2, yaratma efektini göstermektedir. Öğenin stili pratik olarak gereksiz olacaktır, ancak degradenin kendisi ek sözde öğe ::after ve CSS3 kullanılarak eklenecektir. Bu amaçla içerik gücü aracılığıyla boş bir sözde öğe eklenir ve büyük tarayıcılar için farklı öneklere sahip bir degrade eklenir (örnek 2). Degradenin genişliği, genişlik kullanılarak kolayca değiştirilebilir ve ayrıca 0,2 değerini kendi değerinizle değiştirerek görünürlük derecesini de ayarlayabilirsiniz.

Örnek 2. Metin üzerindeki degrade

HTML5 CSS3 IE 8 IE 9 + Cr Op Sa Fx

Dahili bir ayrık arpej, bir çoklu sırayı dönüştürür ve bu, süper polifonik bir polifonik kumaşta eşzamanlı bir dikeyle sonuçlanır.

Bu yöntem tarayıcıda çalışmıyor İnternet Explorerİçinde degrade desteği bulunmadığından sürüm 8.0'a kadar. Alternatif olarak CSS3'ü kullanabilir ve PNG-24 formatındaki bir görüntüyü kullanarak eski yöntemle bir degrade oluşturabilirsiniz.

Bu yöntem yalnızca düz bir arka planda ve herhangi bir zamanda çalışır. Arkaplan resmi metnin üstündeki degrade dikkatinizi çekecektir.

Metnin sonunda üç nokta

Kırpılan metnin sonundaki degradeyi değiştirmek için üç nokta da ekleyebilirsiniz. Üstelik size otomatik olarak ek metin taşması gücü sağlanacaktır. Bu, IE'nin eski sürümleri de dahil olmak üzere tüm tarayıcıların olduğu anlamına gelir ve bu gücün tek kısmı, hala belirsiz olan durumudur. CSS3'e girmek önemlidir, aksi takdirde içindeki kod doğrulamayı geçmeyecektir.

Ek 3, üç nokta ekleyen üç nokta değerlerinden kaynaklanan metin taşması gücünün durgunluğunu göstermektedir. Farenizi metnin üzerine getirdiğinizde metnin tamamı görüntülenir ve arka plan rengiyle vurgulanır.

Örnek 3. Wikostannya metin taşması

HTML5 CSS3 IE Cr Op Sa Fx

Şekil 2'de popoya verilen okumaların sonucu. 3.

Küçük 3. Üç noktalı metin

Bu yöntemlerin en büyük avantajı, metin kısa olduğunda ve belirtilen alana tamamen sığdığında degradenin ve üç noktanın görüntülenmemesidir. Böylece metin ekranda tamamen görünür gibi görünecek ve öğenin genişliği değiştirildiğinde kesilecektir.

Є Sabit yükseklik ve genişlikte bir bloğun ortasında görüntülenmesi gereken günün metni. Bu durumda, metin tam metne yerleştirildiğinde, metnin tamamen görev bloğuna yerleştirilmiş bir parçası görüntülenir ve ardından üç nokta eklenir.

Böyle bir gizem hala yaygın, ancak aynı zamanda göründüğü kadar açık değil.

CSS'de tek satırlık metin seçeneği

Bu şekilde text-overflow'u güçlendirebilirsiniz: elips. Bu durumda, ana gücün sorumlusu konteynerdir taşma Rivne gizlenmiş ya da başka klips

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

CSS'de zengin metin seçeneği

Uzun satırlı metni kırpmanın ilk yolu Vikoristanny CSS yetkililer durgunlaştı ve sahte unsurlar :önceі :sonrasında. Yeni başlayanlar için HTML düzeni

Ve şimdi yetkililerin kendileri

Kutu (taşma: gizli; yükseklik: 200 piksel; genişlik: 300 piksel; satır yüksekliği: 25 piksel;) .kutu: önce (içerik: ""; kayan nokta: sol; genişlik: 5 piksel; yükseklik: 200 piksel;).kutu> *: ilk -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; üst: -25 piksel; sol: %100; genişlik: 3 em; sol kenar boşluğu: -3 em; 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, büyük satırlı metin için sütun genişliğini ayarlamak amacıyla sütun genişliği değerini kullanmaktır. Doğru, bu yöntemi seçerseniz uçlara üç nokta ekleyemezsiniz. HTML:

Blok (taşma: gizli; yükseklik: 200 piksel; genişlik: 300 piksel;).block__inner (-webkit-sütun-genişliği: 150 piksel; -moz-sütun-genişliği: 150 piksel; sütun genişliği: 150 piksel; yükseklik: %100;)

Tarayıcılar için CSS'deki zengin metni çözmenin üçüncü yöntemi Web kiti. Bir önekle bir dizi belirli otoriteyle rekabet etmek zorunda kalacağız -web kiti. Temel olarak -webkit-line-clamp satır bloğundaki giriş sayısını belirtmenize olanak tanır. Çalışmanızı aynı tarayıcı grubunda paylaşmaya karar vermek daha iyidir

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

JavaScript'te zengin metin seçeneği

Burada metnimizin yerleştirildiği ek bir görünmez blok oluşturulur, ardından bloğun yüksekliği gerekli bloğun yüksekliğine eşit veya daha az olana kadar her seferinde bir karakter kaldırılır. Ve sonunda metin çıktı bloğuna taşınır.

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

JQuery eklentisi şöyle görünür:

(Function ($) (var truncate = function (el) (var text = el. Text(), height = el. Height(), clone = el. Clone()); clone.Css ((position: "absolute" , görünürlük: "gizli", yükseklik: "otomatik")); el. after (clone); var l = text.length - 1; for (; l> = 0 && clone.height ()> height; - l) ( clone.text (text.substring (0, l) + "...");) el.text (clone.text ()); clone.remove ();); $.fn.truncateText = function () ( return this.each(function()(truncate($(this)));));) (jQuery));

Bu makale şunları bilmenizi sağlar 3 Hızlı ve Basit CSS Tekniği, Sayfanızda resmin yalnızca bir kısmını göstermeyi nasıl vikorystvovat yapabilirsiniz?

Burada kullanılan tüm yöntemler aslında yalnızca birkaç satır gerektirir CSS kod. Ancak bu kelimenin tam anlamıyla sünnet değildir ( CSS Henüz bir şey yaratamıyoruz), sadece resmin yalnızca görmek istediğimiz kısmını davet edip gösteriyoruz.

Görüntüyü belirtilen boyuta getirmek istiyorsanız veya örneğin yeni bölümde küçük resimler (görüntünün değiştirilmiş bir kopyası) veya benzer bir şey oluşturmak istiyorsanız bu yöntemler daha da karmaşık olabilir.

Teknik 1 - Negatif alanların vikoristannyası ( Negatif Marjlar)

Negatif alanları vikorize etmek istemediğiniz için vikorist tekniğini öneriyoruz №2 . Genişliği ve yüksekliği olan bir batka (paragraf) içerir. Bu paragrafın gücü var konum göreceli olarak ayarlayın. Genişlik ve yükseklik, oluşturulan alanın boyutunu belirtir. Paragrafın ortasına yerleştirilen görüntü ise güçtür konum mutlak olarak ayarlayın. O zaman yetkililerden yardım alabiliriz tepeі solİşlem sırasında resmi istediğiniz gibi yayın: görüntünün hangi kısmı gösterilir, hangi kısmı gösterilmez.

HTMLİleri teknolojideki kodla aynı:

Teknik 3 - kesmenin vykoristannya gücü ( Klip Özelliği)

Bu teknoloji çok hafif olduğu için suçludur, çünkü klip özelliği bir elemanın gösterilmesi gereken kısmı anlamına gelir. Kapsamlı bir karar gibi görünüyor, ancak bu bir demir işi: kırpılmış eleman bir tavır takınmaktan kesinlikle suçludur. Bir elementi seçebilmek için ek bir element eklememiz, görüntünün görünür alanının boyutunu hesaplamamız, bu boyutu babaya eklememiz, babayı bırakmamız gerekiyor... Kupa robotları, sorun ne ?

Ah, bir sorun daha: Kırpılan öğenin boyutu mahsulün boyutuna göre değişmiyor, ancak koçan boyutunda kayboluyor (mahsulün kenarlarının arkasındaki resim tamamen kayboluyor). Görünür alanı babanın sol üst köşesine daraltmak için mutlak konumlandırmayı vikoristuvat yapmalıyız.

Ancak tahmin edilenin pozunu mahrum etmek imkansızdır. kesme gücü. Ve kodu bu şekilde biliyorum...

Metnin sonuna üç nokta eklemek aynı yöntemlerle css ve js kullanılarak yapılabilir.

Başlamak için konunun özüne inelim. Є bloğu işaretleme

Artık listenin dış görünüm öğesindeki metni kesme efektini elde etmeniz ve buna ek olarak üç nokta eklemeniz gerekiyor.

Metin css'yi kırpma

Kimin için sınıf başlığı için stil yaratıyoruz
.tit (
beyaz boşluk: şimdirap; / * Metne tarama aktarımı * /
taşma: gizli; / * Sığacak şekilde kesilmiş * /
dolgu: 5px; /*Alanlar*/
metin taşması: üç nokta; / * Üç nokta * /
}

Bu kararın özelliği, metnin bloğun boyutuna uyması durumunda hiçbir ekleme yapılmayacağı gerçeğinde yatmaktadır. Kirazlar asla unutulmayacak.

Çoğu zaman metni günün sonunda ve yalnızca bir nokta ekledikten sonra kırpmak gerekir.
Herhangi bir zamanda nokta eklemek gerekirse (metin türü ne olursa olsun, 3 harf bile olsa) ayrıntılar da keskinleştirilir. Metin bir şarkının boyutuna ulaştıysa kırpılması gerekir. Bu nedenle senaryoların vikorize edilmesi gerekmektedir.

Metni belirli sayıda karakter için kestik ve birbirinden bağımsız olarak üç kutu ekledik

Neyden korkuyoruz?

Komut dosyasına hangi öğelerin işlenmesi gerektiğini söylüyoruz.
Satırda olanlar için var elem = document.getElementsByClassName("tit"); Elemanın sınıfı belirtilir (arızadır ancak yenidir).

Daha sonra kırpmadan önce metnin boyutunu ayarlamanız gerekir. Tüm kısa çizgilerimiz üç benek ile tamamlanacaktır. Bu, var size = 75 değişikliğiyle gösterilir;

Artık betiğin gerekli sınıftaki tüm öğeleri gözden geçirmesi ve işaretleri koyması gerekiyor.
Komut dosyası, kaplama satırının dowzhin'ini kontrol eder ve 75 karakteri aşarsa metni kırpar. Dovzhin daha küçükse, üç nokta basitçe eklenir (if (elem [i].innerHTML.length> size) satırı).

Komut dosyasının nasıl çalıştığına hayran kalacaksınız demo sayfalar. Hepsi bu, artık farklı yöntemler kullanarak uzun metinleri nasıl kırpacağınızı biliyorsunuz.