Etiket: overflow

CSS3 text-overflow

text-overflow :

Taşan metnin gizlendiğini kullanıcıya belirtmek için kullanılır.

Örnek

p {
  white-space: nowrap; 
  width: 500px; 
  overflow: hidden;
  text-overflow: ellipsis; 
  border : 1px solid red;
  padding: 40px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
clip Metnin taşan kısmını keser.
ellipsis Metnin taşan kısmından itibaren üç nokta koyar.
string
İnital
İnherit

Tarayıcı Desteği
4.0 7.0 6.0 3.1 11.0
9.0-o
Posted on by Samed GÖZÜTOK 1

CSS3 overflow-y

overflow-y :

Bir elementin içindeki yukarı ve aşağı yöndeki taşmalarının nasıl olacağını belirlemek için kullanılır.

Örnek

div {
  width: 500px;
  height: 300px;
  overflow-y: hidden;
  overflow: scroll;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
visible Taşma gizlenmez.
hidden Taşma gizlenir.
scroll Taşma scroll ile gizlenir.
auto Taşma otomatik ayarlanır.
İnital
İnherit

Tarayıcı Desteği
4.0 3.5 9.5 3.0 9.5
Posted on by Samed GÖZÜTOK 0

CSS3 overflow-x

overflow-x :

Bir elementin içindeki sağ ve sol yöndeki taşmalarının nasıl olacağını belirlemek için kullanılır.

Örnek

div {
  width: 300px;
  height: 200px;
  overflow-x: hidden;
  border: 1px solid green;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
visible Taşma gizlenmez.
hidden Taşma ebgellenir.
scroll Taşma scroll ile gizlenir.
auto Taşma otomatik ayarlanır.
İnital
İnherit

Tarayıcı Desteği
4.0 3.5 3.0 9.0 9.5
Posted on by Samed GÖZÜTOK 0

CSS overflow

overflow :

Bir elementin içindeki taşmaların ne olacağını belirlemek için kullanılır.

Örnek

div {
  width: 400px;
  height: 400px;
  overflow: scroll;
  background: red;
  color: white;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
visible Taşma engellemez.
hidden Taşmayı engellemek için kullanılır.
scroll Taşma scroll ile gizlenir.
auto Taşma otomaik olarak ayarlanır.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 4.0 1.0 7.0
Posted on by Samed GÖZÜTOK 0