Uzun dizeleri CSS ile kesmek: henüz mümkün mü?

Dinamik içeriğin sabit genişlik ve yükseklik düzenine sığabilmesi için metni düz HTML ve CSS ile kesmenin iyi bir yolu var mı?

Sunucu tarafında mantıksal genişliğe (yani körü körüne tahmin edilen sayıda karaktere) kesiyorum, ancak 'w' bir 'i' den daha geniş olduğu için bu yetersiz olma eğilimindedir ve aynı zamanda yeniden tahmin etmemi de gerektirir ( ve her sabit genişlik için karakter sayısını ayarlamaya devam edin). İdeal olarak, kesilme , oluşturulan metnin fiziksel genişliğini bilen tarayıcıda gerçekleşir .

IE text-overflow: ellipsistam olarak ne istediğimi yapan bir özelliğe sahip buldum , ama bu çapraz tarayıcı olması gerekir. Bu özellik (biraz?) Standart gibi görünüyor, ancak Firefox tarafından desteklenmiyor. Ben dayalı çeşitli geçici çözümler buldum overflow: hidden, ama onlar ya bir üç nokta (kullanıcının içerik kesildi bilmek bilmek istiyorum) veya her zaman (içerik kesilmemiş olsa bile) görüntülemek yok.

Herkes dinamik metin sabit bir düzen sığdırmak için iyi bir yolu var mı, ya da mantıksal genişliği ile sunucu tarafı kesme şimdilik almak için iyi mi?

Güncelleme: Firefox 7'den itibaren text-overflow: ellipsisdesteklenmektedir (27 Eylül 2011'de yayınlandı). Yaşasın! Orijinal cevabım tarihi bir kayıt olarak takip ediyor.

Justin Maxwell çapraz tarayıcı CSS çözümüne sahiptir. Ancak, metnin Firefox'ta seçilmesine izin vermemenin dezavantajı var. Bunun nasıl çalıştığına dair tüm ayrıntılar için Matt Snider'ın blogundaki konuk yayınına göz atın .

Bu tekniğin ayrıca innerHTMLFirefox'taki özelliği kullanarak JavaScript'teki düğüm içeriğinin güncellenmesini engellediğini unutmayın . Geçici çözüm için bu yayının sonuna bakın.

CSS

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

ellipsis.xml dosya içeriği

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

Düğüm içeriğini güncelleme

Bir düğümün içeriğini Firefox'ta çalışan bir şekilde güncellemek için aşağıdakileri kullanın:

var replaceEllipsis(node, content) {
    node.innerHTML = content;
    // use your favorite framework to detect the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
};

Bunun nasıl çalıştığına dair açıklama için Matt Snider'ın gönderisine bakın .

2014 Mart: CSS ile uzun dizeleri kesme: tarayıcı desteğine odaklanan yeni bir cevap

Demo: http://jsbin.com/leyukama/1/ (jsbin kullanıyorum çünkü eski IE sürümünü destekliyor).

<style type="text/css">
    span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;     /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/
        -o-text-overflow: ellipsis;  /** Opera 9 & 10 **/
        width: 370px; /* note that this width will have to be smaller to see the effect */
    }
</style>

<span>Some very long text that should be cut off at some point coz it's a bit too long and the text overflow ellipsis feature is used</span>

-Ms-text-overflow CSS özelliği gerekli değildir: metin taşması CSS özelliğinin eş anlamlısıdır, ancak 6'dan 11'e kadar olan IE sürümleri zaten metin taşması CSS özelliğini destekler.

Web tarayıcıları için Windows işletim sisteminde başarıyla test edildi (Browserstack.com'da):

• IE6 - IE11
• Opera 10.6, Opera 11.1, Opera 15.0, Opera 20.0
• Chrome 14, Chrome 20, Chrome 25
• Safari 4.0, Safari 5.0, Safari 5.1
• Firefox 7.0, Firefox 15

Firefox: Simon Lieschke'nin işaret ettiği gibi (başka bir cevapta), Firefox yalnızca Firefox 7'den sonraki metin taşması CSS özelliğini destekler (27 Eylül 2011'de yayınlandı).

Firefox 3.0 ve Firefox 6.0'da bu davranışı iki kez kontrol ettim (metin taşması desteklenmez).

Mac OS web tarayıcılarında bazı ek testler gerekli olacaktır.

Not: bir üç nokta uygulandığında fare imlecinde bir araç ipucu göstermek isteyebilirsiniz, bu javascript aracılığıyla yapılabilir, şu sorulara bakın: HTML metin taşması üç nokta tespiti ve HTML - SADECE üç nokta etkinleştirildiğinde araç ipucunu nasıl gösterebilirim

Kaynaklar:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#Browser_compatibility
• http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
• https://stackoverflow.com/a/1101702/759452
• http://www.browsersupport.net/CSS/text-overflow
• http://caniuse.com/text-overflow
• http://msdn.microsoft.com/en-us/library/ie/ms531174(v=vs.85).aspx
• http://hacks.mozilla.org/2011/09/whats-new-for-web-developers-in-firefox-7/

Bir JavaScript çözümüne uygunsanız, bunu tarayıcılar arası bir şekilde yapmak için bir jQuery eklentisi vardır - bkz. Http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for -firefox-ile-jquery /

Tamam, Firefox 7 uygulanan text-overflow: ellipsissıra sıra text-overflow: "string". Nihai sürümün 2011-09-27 tarihinde yapılması planlanıyor.

Soruna başka bir çözüm, aşağıdaki CSS kuralları kümesi olabilir:

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

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

Yukarıdaki CSS ile tek dezavantajı, metnin kaptan taşmasına bakılmaksızın "..." ekleyebilmesidir. Yine de, bir grup öğeye sahip olduğunuz ve içeriğin taşacağından emin olduğunuz bir durum varsa, bu daha basit bir kurallar kümesi olacaktır.

Benim görüşüm. Justin Maxwell'in orijinal tekniğine şapka çıkarıyor