nasıl sadece css

Question

Ben 10 karaktere kadar bir dizi karakter görüntülemek için mümkün istiyorum

kullanarak bir dize bölümünü görüntüler yok. Dize 10 karakterden fazla olursa, sonuna '...' eklemek isterim. Örneğin

, ben dize varsa:

'helloworld...' 

Sadece böyle bir div benim dize görüntüleyen ediyorum:

'helloworldmynameisryan' 

o kadar gibi görüntülenmesini istediğiniz

<div>DisplayMessage</div> 

Yalnızca dize 10 karakterden fazlaysa uygulanabilecek bir sınıf oluşturabileceğim bir sınıf var mı?

Answer 1

Ne yazık ki sadece CSS kullanarak bunu yapmak için iyi bir çapraz tarayıcı yolu yoktur. 'text-overflow' dizginin genişliğine ve ihtiyacınız olan dizginin uzunluğuna dayanmaz.

Bu yardımcı bu

function ellipsify (str) { 
    if (str.length > 10) { 
     return (str.substring(0, 10) + "..."); 
    } 
    else { 
     return str; 
    } 
} 

Umut ulaşmak için javascript dizeleri .length özelliğini kullanabilirsiniz.

Answer 2

İt's üç nokta denilen ve bir blok elemanı üzerinde kullanabilirsiniz.

Ancak Firefox'ta çalışmıyor ve css içinde karakterleri genişliğini belirleyemezsiniz gibi tam olarak 10 karaktere genişliğini ayarlayabilirsiniz olamaz.

tam olarak 10 karakter istiyor ve Firefox uyumluluğu javascript veya bir sunucu tarafı çözümü kullanmak zorunda olacaktır.

çek üç nokta: http://www.quirksmode.org/css/textoverflow.html

veya bu deneyin: Bunun

.ellipsis{ 
white-space:nowrap; 
overflow:hidden; 
} 

.ellipsis:after{ 
    content:'...'; 
} 

jQuery eklentisi:

http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/

Answer 3

herhangi serverside komut dosyası veya javascript kullanarak olmadan bunu yapamaz. fonksiyonu aşağıda

kullanın. LimitCharacter($yourString,5);

olarak

function LimitCharacter($data,$limit = 20) 
{ 
    if (strlen($data) > $limit) 
    { 
     $data = substr($data, 0, strrpos(substr($data, 0, $limit), ' ')) . '...'; 
     return $data; 
    } 
    else 
    { 
     return $data; 
    } 
} 

çağrı bunu JavaScript

var str = 'Some very long string'; 
if(str.length > 10) str = str.substring(0,10)+"..."; 

CSS

.limtiCharClass { 
    -o-text-overflow: ellipsis; /* Opera */ 
    text-overflow: ellipsis; /* IE, Safari (WebKit) */ 
    overflow:hidden;    /* don't show excess chars */ 
    white-space:nowrap;   /* force single line */ 
    width: 300px;     /* fixed width */ 
} 

Answer 4

elips bir css3 fonksiyonudur ve ne zaman sorumluluk yönün içinde test tarayıcılar kiralamak sorunları var. Hızlı bir çevrede "div'e ile belirli bir tanımlamak veya gizli taşma ile yayılan ve ardından diyen bir arka plan resimleri eklemek olacaktır olsun ...quirksmode göre, "

Answer 5

, birçok yolu vardır sar O
gibi gösterilecektir

<div>111111111111111111111111111<wbr>11111111111111111111111111111</div> 

altında gibi <wbr> etiketi kullanmak için

<div>11111111111111111111111111111111111111111111111111111111</div> 

gibi uzun bir metin varsa 111111111111111111111111 veya ­ kullanmak yerine, çıktı

olacaktır

111111111111111111111- 
1111111111111111111111 

Ya da JS çözümü arıyorsanız, o zaman this kullanın.

Answer 6

Firefox şu anda bunu destekliyor, sadece 'kırpmak' için çalıştığınız her şeyin blok seviyesi biçimlendirmesine ve bir genişliğe sahip olmasını sağlamanız gerekir;

.ellipsis { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display:block; 
    width : 100px; /* this could be defined on any parent */ 
}