CSS kullanarak uzun metin nasıl kırpılır? İçeriği kırpmak için bir üç nokta Div ekleyerek tek veya çok satırlı metni yüksekliğe kırpın
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 sınırlı bir alana çok fazla metin sığdırma görevi ortaya çıkıyor. Örneğin, bu gerekli olabilir mobil versiyon site veya satır sayısının önemli olduğu bir arayüz için. Bu gibi durumlarda, metnin yalnızca cümlenin başlangıcını bırakarak uzun satırları kırpmak mantıklıdır. Bu şekilde arayüzü kompakt bir forma getireceğiz ve görüntülenen bilgi miktarını azaltacağız. Satır kırpmanın 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 metin kesme yöntemlerine bakacağız.
Gerçekte her şey overflow özelliğinin gizli değeriyle kullanılmasına bağlıdır. Farklılıklar yalnızca metnimizin farklı görünümünde yatmaktadır.
Taşma kullanmaOverflow özelliğinin metinle birlikte tüm görkemiyle kendini göstermesi için, nowrap değerine sahip beyaz boşluk kullanarak metni açmanız gerekir. Bu yapılmazsa ihtiyacımız olan etki oluşmayacak, metne kısa çizgiler eklenecek ve metnin tamamı 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; /* Metin kaydırmayı iptal et */ taşma: gizli; /* İçeriği kırp */ arka plan: #fc0; /* Arka plan rengi */ dolgu: 5 piksel; /* Kenar boşlukları */ )
Sonuç bu örnekŞekil 2'de gösterilmiştir. 1.
Pirinç. 1. Taşma özelliği uygulandıktan sonra metnin görünümü
Şekilden görülebileceği gibi, genel olarak bir dezavantaj vardır; metnin bir devamının olduğu açık değildir, dolayısıyla kullanıcının bu konuda bilgilendirilmesi gerekir. Bu genellikle bir degrade veya elips kullanılarak yapılır.
Metne Degrade EklemeSağdaki metnin bitmediğini daha açık hale getirmek için, şeffaf renkten arka plan rengine kadar bir degradeyi üstüne yerleştirebilirsiniz (Şek. 2). Bu, metnin yavaş yavaş çözülmesi efektini yaratacaktır.
Pirinç. 2. Degrade metin
Örnek 2 bu etkinin nasıl oluşturulacağını göstermektedir. Öğenin stili hemen hemen aynı kalacak, ancak ::after sözde öğesini ve CSS3'ü kullanarak degradenin kendisini ekleyeceğiz. Bunu yapmak için, content özelliği aracılığıyla boş bir sözde öğe ekliyoruz ve buna büyük tarayıcılar için farklı öneklerle bir degrade uyguluyoruz (örnek 2). Degradenin genişliği genişlik kullanılarak kolayca değiştirilebilir, 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; /* Metin sarmayı iptal et */ taşma: gizli; /* İçeriği kırp */ dolgu: 5 piksel; /* Kenar boşlukları */ arka plan: #fc0; /* Arka plan rengi */ konum: göreceli ; /* Göreli konumlandırma */ ) .size::after ( content: ""; /* Öğeyi göster */ konum: mutlak; /* Mutlak konumlandırma */ sağ: 0; üst: 0; /* Öğenin konumu */ genişlik : 40 piksel; /* 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(sol, rgba(255,204,0, 0,2), #fc0 %100); arka plan: -o-linear-gradient(sol, 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 bir arpej, bir çoklu diziyi dönüştürür; bu, süper polifonik bir yapıda tek seferlik bir dikeydir.
Bu yöntem tarayıcıda çalışmıyor İnternet Explorer Degradeleri desteklemediğinden sürüm 8.0'a kadar. Ancak CSS3'ten vazgeçebilir ve PNG-24 formatındaki bir görüntü aracılığıyla eski usul bir degrade oluşturabilirsiniz.
Bu yöntem yalnızca aşağıdakilerle birleştirilebilir: düz arka plan ve bir arka plan görüntüsü olması durumunda, metnin üstündeki degrade dikkat çekici olacaktır.
Metnin sonunda üç noktaKırpılan metnin sonunda degrade yerine üç nokta da kullanabilirsiniz. Ü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 anda durumunun belirsiz olmasıdır. CSS3 bu özelliği içeriyor gibi görünüyor, ancak bu özelliği içeren kod doğrulamayı geçemiyor.
Örnek 3, üç nokta ekleyen üç nokta değeriyle birlikte text-overflow özelliğinin kullanımını göstermektedir. Farenizi 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; /* Metin sarmayı iptal et */ taşma: gizli; /* İçeriği kırp */ dolgu: 5 piksel; /* Kenar boşlukları */ text-overflow: elips; /* Üç nokta */ ) .size :hover ( arka plan: #f0f0f0; /* Arka plan rengi */ beyaz boşluk: normal; /* Normal metin kaydırma */ ) Bilinçdışı kontrasta neden olur, bu Lee Ross tarafından temel bir atıf hatası olarak tanımlanır ve bu durum şu şekilde görülebilir: birçok deney.
Bu örneğin sonucu Şekil 2'de gösterilmektedir. 3.
Pirinç. 3. Üç noktalı metin
Bu yöntemlerin en büyük avantajı, metin kısaysa ve belirli bir alana tamamen sığıyorsa degrade ve elipslerin görüntülenmemesidir. Böylece metin ekranda tamamen göründüğünde her zamanki gibi görüntülenecek ve öğenin genişliği azaldığında kesilecektir.
Bu makalede, sayfanızda bir görselin yalnızca bir kısmını göstermek için kullanabileceğiniz 3 hızlı ve kolay CSS tekniğini göstereceğiz.
Burada kullanılan tüm yöntemler aslında yalnızca birkaç satır gerektiriyor CSS kod. Ancak bu kelimenin tam anlamıyla sünnet değildir ( CSS henüz bunu yapamayız), sadece resmin yalnızca görmek istediğimiz kısmını gizleyip gösteririz.
Bir görüntüyü belirli bir boyuta getirmek istiyorsanız, yani örneğin haber bölümünde bunun bir ön izlemesini (görüntünün daha küçük bir kopyası) veya buna benzer bir şey oluşturmak istiyorsanız bu teknikler çok yararlı olabilir.
Negatif kenar boşlukları kullanmak istemiyorsanız 2 numaralı tekniği kullanmanızı öneririz. Belirli bir genişliğe ve yüksekliğe sahip bir ebeveyn (paragraf) içerir. Bu paragrafın özelliği var konumlandırma göreceli olarak ayarlayın. Genişlik ve yükseklik görüntülenen alanın boyutlarını tanımlar. Ve bir paragrafın içine yerleştirilen bir resim şu özelliğe sahiptir: konumlandırma mutlak olarak ayarlayın. Daha sonra özellikleri kullanabiliriz tepe Ve sol Resmin hangi bölümünün gösterilip hangisinin gösterilmeyeceğini belirleme sürecinde resmi istediğimiz gibi düzenleyin.
HTMLönceki teknikteki kodla aynı:
< p class = "crop" > < a href = "#" title = "" > < img src = "img.jpg" alt = "" / > < / a > < / p > |
Mahsul ( şamandıra: sol; kenar boşluğu: . 5em 10 piksel . 5em 0; taşma: gizli; /* bu önemli */ konum: göreceli; /* bu da önemli */ kenarlık: 1 piksel katı #ccc; genişlik: 200 piksel; yükseklik: 120 piksel; Görüntüyü kırp ( konum: mutlak; üst: - 40 piksel; sol: - 50 piksel; |
Bu teknik en kolayı olmalı çünkü klip özelliği elemanın gösterilmesi gereken kısmını tanımlar. Bu mükemmel bir çözüm gibi görünüyor, ancak tek yakalama: kırpılmış eleman mutlaka konumlandırılmalıdır. Öğeyi kullanabilmek için şunu eklememiz gerekecek: ek eleman, görüntünün görünür alanının boyutunu hesaplayın, bu boyutu ebeveyne ekleyin, ebeveyni kullanın... Ne kadar çok iş var değil mi?
Ah, bir sorun daha: Kırpılan öğenin boyutu, kırpma boyutuna küçültülmüyor, ancak orijinal boyut olarak kalıyor (kırpmanın dışındaki resim basitçe gizleniyor). Görünür alanı ebeveynin sol üst köşesine taşımak için mutlak konumlandırmayı kullanmalıyız.
Ancak değinmeden geçilemez dilimleme özelliği. Ve böylece kod tekrar...
< div class = "crop" > < a href = "#" title = "" > < img src = "img.jpg" alt = "css şablonu" / > < / a > < / div > |
Herkese merhaba, benim adım Anna Blok ve bugün grafik programları kullanmadan görsellerin nasıl kırpılacağından bahsedeceğiz.
Bu nerede yararlı olabilir?Her şeyden önce, resim içeren içeriğin büyük olasılıkla belirli bir blok için kırpılmayacağı sitelerde.
Çarpıcı bir örnek: WordPress'te bir blog.
Diyelim ki makalenizin kapağının 1:1 (kare) en boy oranına sahip olmasını istiyorsunuz. Eylemleriniz:
Siteyi ziyaret ettiğinizde beklediğiniz sonucu göreceksiniz.
Ancak diyelim ki Photoshop'ta görseli kırpmayı unuttunuz ve internetten kapak olarak rastgele bir görsel indirdiniz, o zaman ne olacak? Doğru, düzen bozulacak. Ve eğer CSS'yi hiç kullanmadıysanız, bir HD görüntü metnin tüm görünümünü tamamen engelleyebilir. Bu nedenle, görüntüleri kırpabilmek önemlidir. CSS yardımı stiller.
Bunun yalnızca CSS kullanılarak değil aynı zamanda SVG kullanılarak nasıl uygulanabileceğine dair farklı durumlara bakalım.
Arka plan resmi kullanılarak yerleştirilen resmi kırpmayı deneyelim. Küçük bir HTML işaretlemesi oluşturalım
CSS stiline geçelim. arka plan resmini kullanarak bir resim ekliyoruz, resmimiz için çerçeveleri belirliyoruz, arka plan konumunu kullanarak resmi ortalıyoruz ve arka plan boyutunu ayarlıyoruz:
jpg);
Bu, bir görüntüyü kırpmanın ilk ve en basit yöntemiydi. Şimdi ikinci örneğe bakalım.
İçinde şimdi biçimlendireceğimiz bir görselin bulunduğu img etiketinin bulunduğu aynı kutu konteynerinin hala elimizde olduğunu varsayalım.
Ayrıca yaratacağımız nesneye göre imajımızı da ortalayacağız. Ve oldukça nadir kullanılan bir özelliği kullanıyoruz: object-fit.
Box ( konum: göreceli; taşma:gizli; genişlik:300 piksel; yükseklik:300 piksel; ) .box img ( konum: mutlak; üst:%50; sol:%50; transform:translate(-%50,-%50); genişlik:300 piksel; yükseklik:300 piksel; nesneye sığdırma:kapak)
Bana göre bu en iyi yöntemdir. Gönderiler için tamamen farklı oranlarda görseller kullanmanız bloglar için idealdir.
Burada HTML ve CSS hakkında daha fazla bilgi edinebilirsiniz:
Ayrıca görselleri SVG öğelerine eklersek, o anda görseller için kırpma da oluşturabiliriz. Örnek olarak bir daireyi ele alalım. Etiketleri kullanarak SVG oluşturabiliriz. İçinde bir daire etiketi ve bir desen etiketi içerecek bir svg kenarlık etiketi oluşturun. Desen etiketine resim etiketini yazıyoruz. İçinde xlink:href niteliğini belirtiyoruz ve bir resim ekliyoruz. Ayrıca genişlik ve yükseklik özelliklerini de ekleyeceğiz. Ama hepsi bu değil. Doldurma değerini eklememiz gerekecek. Çalışmamızın tamamlanmış sayılması için resim etiketine, resmimizi tüm dairenin etrafında "baştan sona" doldurmamıza olanak sağlayacak koruyucuAspectRatio yardımcı niteliğini ekleyeceğiz.
Bu yönteme evrensel diyemem. Ancak istisnai durumlarda kullanılabilir. Örneğin, bir blogun konusuna değinirsek, bu yöntem, makaleyi yazan yazarın avatarına ideal olarak uyabilir.
Burada HTML ve CSS hakkında daha fazla bilgi edinebilirsiniz:
Sonuçlar:
Web sitelerindeki görselleri kırpmanın 3 yöntemini inceledik: arka plan resmi kullanmak, img etiketini kullanmak ve gömme ile svg deseniyle ilişkilendirmek raster görüntüler resim etiketini kullanarak. SVG kullanarak bir görüntüyü kırpmanın başka yöntemlerini biliyorsanız, bunları yorumlarda paylaşın. Sadece benim için değil, başkalarının da bunları bilmesi faydalı olacaktır.
Düzen veya ön uç geliştirmeyle ilgili sorularınızı FrontendHelp çevrimiçindeki profesyonellere sormayı unutmayın.
Metnin sonuna üç nokta eklemek, elimizdeki css ve js gibi çeşitli yollarla yapılabilir.
Öncelikle soruna bakalım. Blok işaretleme var
- Stiller, düzen, programlama ve web siteleri hakkında daha birçok ilginç şey hakkında birçok ilginç metin
- Ancak blok boyutunu sınırlayamazsak nasıl üç nokta koyabiliriz?
- Bir js betiğine ne dersiniz? Bunu yapabilir, değil mi?
- Kesinlikle olabilir. Kodu burada saklayın, Unicode karakterleri sayar ve gerekirse kırpar
Artık her liste öğesindeki metni kesme efektini elde etmeniz gerekiyor, buna ek olarak bir üç nokta eklemeniz gerekiyor.
CSS metnini kırpmaBunu yapmak için baştankara sınıfına yönelik bir stil oluşturalım
.baştankara(
beyaz boşluk: şimdirap; /* Metin kaydırmayı iptal et */
taşma: gizli; /* İçeriği kırpın */
dolgu: 5px; /* Alanlar */
metin taşması: üç nokta; /* Üç Nokta */
}
Bu çözümün özelliği, eğer metin blok boyutuna sığıyorsa üç noktanın eklenmeyeceğidir. Bu her zaman sorunun çözümü değildir.
Çoğu zaman metni uzunluğuna göre kırpmanız ve ancak bundan sonra noktalar eklemeniz gerekir.
Her durumda nokta eklemenin gerekli olduğu görevler de vardır (metin ne kadar uzun olursa olsun, en az 3 harf). Metin belirli bir boyuttan daha uzunsa kırpılması gerekir. Bu durumda scriptlerin kullanılması gerekmektedir.
işlev başlığı() (
var öğe, boyut, metin;
var elem = document.getElementsByClassName("tit");
var text = elem.innerHTML;
var boyutu = 75;
var n = 70;
for(var i = 0; i< elem.length; i++) { /* необходимо вставить цикл, чтоб получить все блоки с классом tit */
if(elem[i].innerHTML.length > size) (
metin = elem[i].innerHTML.substr(0,n);
}
başka(
metin = elem[i].innerHTML;
}
elem[i].innerHTML = metin + "...";
}
}
başlık();
Komut dosyasına hangi öğelerin işlenmesi gerektiğini söylüyoruz.
Bunu yapmak için, satırda var elem = document.getElementsByClassName("tit"); elemanın sınıfını belirtin (aynı olmalıdır).
Daha sonra kesmeden önce metnin boyutunu ayarlamanız gerekir. Bunlar üç noktanın ekleneceği kısa çizgilerimizdir. Bunun sorumlusu var size = 75 değişkenidir;
Artık betik gerekli sınıfa sahip tüm öğeleri gözden geçirmeli ve bir üç nokta eklemelidir.
Komut dosyası her satırın uzunluğunu kontrol eder ve 75 karakteri aşarsa metni keser. Uzunluk daha azsa, basitçe bir üç nokta eklenir (satır if(elem[i].innerHTML.length > size)).
Komut dosyasını demo sayfasında çalışırken görebilirsiniz. Hepsi bu, artık çeşitli yöntemleri kullanarak uzun metni nasıl kırpacağınızı biliyorsunuz.
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, verilen bloğa tamamen uyan bir metin parçası görüntülenmeli ve ardından bir üç nokta ayarlanmalıdır.
Bu görev oldukça yaygındır ancak aynı zamanda göründüğü kadar önemsiz de değildir.
CSS'de tek satırlık metin seçeneğiBu durumda text-overflow: elips özelliğini kullanabilirsiniz. Bu durumda konteynerin şu özelliğe sahip olması gerekir: taşma eşit gizlenmiş veya klip
Blok ( genişlik: 250 piksel; beyaz boşluk: nowrap; taşma: gizli; metin taşması: üç nokta;)
CSS'de çok satırlı metin seçeneğiÇok satırlı metni kırpmanın ilk yolu kullanmaktır. CSS özellikleri sözde öğeleri uygula :ö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 ( taşma : gizli ; yükseklik : 200 piksel ; genişlik : 300 piksel ; satır yüksekliği : 25 piksel ; ) .box :before ( content : "" ; float : left ; genişlik : 5px ; yükseklik : 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 : -25 piksel ; genişlik: 3 em; sağ dolgu: 5 piksel; arka plan boyutu: %100 %100; (255, 255, 255, 0), beyaz %50;
Başka bir yol da, çok satırlı metin için sütun genişliğini ayarladığımız sütun genişliği özelliğini kullanmaktır. Ancak bu yöntemi kullanırken sonuna üç nokta koymak mümkün olmayacaktı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.
Block ( overflow : gizli ; yükseklik : 200 piksel ; genişlik : 300 piksel ; ) .block__inner ( -webkit-column-width : 150px ; -moz-column-width : 150px ; sütun genişliği : 150px ; yükseklik : 100% ; )
Çok satırlı metni CSS kullanarak çözmenin üçüncü yolu Webkit tarayıcıları içindir. İçinde önekle birlikte birkaç spesifik özellik kullanmamız gerekecek -web kiti. Bunlardan en önemlisi -webkit-line-clamp'tır ve bir blokta çıkarılacak satır sayısını belirlemenizi sağlar. Çö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 seçeneğiBurada, 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 kaldırılır. Ve sonunda metin orijinal bloğa taşınır.
var bloğu = belge. querySelector(".block"), metin = blok. innerHTML, klon = belge. createElement("div");
klon tarzı. konum = "mutlak";
(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" )); ( clone .text ( text .substring ( 0 , l ) + "..." ); el .text ( clone .remove ( ) ); ( bunu döndür . her biri (işlev () ( truncate ( $ ( this )); )( jQuery ));