mesutmurt.com
rss google pinterest
  SEO & WEBMASTER ARAÇLARI     VİDEOLAR     PROGRAMLAR     İLETİŞİM     İP ADRESİM  

Belirli bir boyuttan taşan uzun metinleri CSS3 ile düzenlemek

23-06-2014  |  2616 OKUNDU

Projelerimizde boyutları belirlenmiş alan içerisinde uzun metinler kullanmak durumunda kalabiliriz. Metinin, belirlenmiş alanın dışına taşması  veya alanı genişletmesi istemediğimiz bir durumdur. Bu durumlarda CSS3’ün metin biçimlendirme özellikleri bize bir çok seçenek sunuyor. 

Text-overflow

CSS3’te  “Text-overflow” aldığı niteliğe göre taşan metinleri kırpmamızı  veya taşan kısma “ellipsis” niteliğini kullanarak “…” işareti koymamızı sağlar.

Metin taşması durumunda text-overflow’un alacağı parametreler

text-overflow:  ellipsis | clip

ellipsis : Metnin taşan kısmından itibaren "..." koymayı sağlar
clip : Metnin taşan kımını keser

Örnek sayfa için tıklayın.

 

Şimdi bir örnekle ve satır satır açıklayalım.

CSS Kodu

<style type="text/css">
.hucre {
    margin:5px;  /*Hucre kenarı ile dış nesne arasındaki uzaklık*/
    padding: 5px;  /*Hucre kenarı ile iç nesne arasındaki uzaklık*/
    width:200px;  /*Hücrenin px cinsinden genişliği*/
    border: 1px solid #ddd;   /*Hucre kenarının kalınlık, tipi ve rengi*/
    white-space: nowrap; /*Metnin 2 satıra geçmesini engeller*/
    overflow: hidden; /*Metnin taşan kısmı gizli hale getirilir*/   
    text-overflow: ellipsis; /*Metnin taşan kımından itibaren üç nokta koyar */
    border: 1px solid #ddd; 
}

HTML Kodu

<div class="hucre">
Bellirli bir boyuttan taşan uzun metinleri CSS ile düzenlemek.
</div>

Sonuç


Copyright © 2013 - 2017 E-Posta : bilgi@mesutmurt.com
IP Adresi Nedir |Bilişim ve Teknoloji | e-devlet.co
Bu Yazı İlginizi Çekebilir
Ubuntu Server 14.04 LTS platformunda Apache2 Server, PHP5 ve MySQL5.5 Kurulumu
Belirli bir boyuttan taşan uzun metinleri CSS3 ile düzenlemek