2013-02-27 4 views
8

Bir div veya sınıfın yalnızca bir metin satırı olduğundan emin olmak için css'de bir yol var mı ve eğer devam ederse, üzerinde elipsler var mı? Div/class'ı belli bir yüksekliğe ve overflow:hidden'a ayarlayabileceğinizi biliyorum, ama yapmaya çalıştığım şey için garip görünüyor.Bir satırda div tutma ve elips ekleme

Aşağıdaki resimde, sağdaki div'un soldakilerden daha büyük olduğunu görüyorsunuz. Eğer şarkının ismini elipslerle yapabiliyorsam, ikisi de aynı yükseklikte olacak. Bunu nasıl başaracağını bilen var mı? Not; Ben php içinde $song = substr(0, 10, $song) gibi bir şey yapmaktan daha iyi bir yol istiyorum ... CSS ile umarım mümkün bir şey.

cevap

13
  1. Kapta bir genişlik ayarlayın.
  2. Beyaz boşluk ayarla: nowrap.
  3. Metin taşması ayarla: elips.
  4. *

Demo taşması gizleme: http://jsfiddle.net/jD99d/

.my-class-name { 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    width: 100px; 
    overflow: hidden; 
} 

https://developer.mozilla.org/en-US/docs/CSS/text-overflow

* Bu CSS özelliği gerçekleşmesi bir taşma zorlamaz" Not Bkz; bunu ve Uygulanacak metin taşması yapmak için, yazar, gizli olarak taşma ayarını yapmak gibi öğe üzerinde bazı ek özellikler uygulamalıdır. "

+0

Sadece CSS3 ile çalışır, bence. – rjml

+0

Siz efendim, bir dahisin. Teşekkürler! – jas7457

+0

Haha, sorun değil! –