Dinamik içerik sabit genişlik ve yükseklik bir düzen içinde uygun olabilir, böylece düz HTML ile metin kesiliyor ve CSS, herhangi bir iyi bir yolu var mı?

Yana sunucu kesiliyor oldummantıklıgenişlik (yani körü körüne-tahmin sayıda karakter), ama beri bir 'w' den daha geniş bir 'ben' bu eğilimi olmak hassasiyetli, ve de gerektirir bana yeniden tahmin (ve tutun verdiği) için karakter sayısını her sabit genişlik. İdeal kesme bilir hangi tarayıcı olurfizikselişlenen metnin genişliği.

YANİ istediğim tam olarak yapar text-overflow: ellipsis bir özelliği olduğunu düşünmüşümdür. ama bu çapraz tarayıcı olması lazım. Bu özellik 11* *ama Firefox tarafından desteklenmemektedir. Buldum various workarounds temel overflow: hidden ama onlar da yok görünen üç nokta (istiyorum kullanıcı bilmek yetinmedi kesilmiş) veya ekran her zaman (bile içeriği değildi kesilmiş).

Herkes sabit bir düzen içinde uygun dinamik bir metin iyi bir yolu var mı yoksa sunucu tarafında mantıksal genişliği kesme şimdilik alacağım kadar iyi?

Güncelleme:text-overflow: ellipsis is now supported Firefox 7 (27 Eylül 2011 yayınlandı). Yay! Benim orijinal cevap tarihi bir kayıt olarak izler.

Justin Maxwell CSS çapraz tarayıcı çözüm vardır. Olumsuz metni Firefox seçilmesi için izin vermiyor ancak geliyor. Bu nasıl çalıştığı hakkında tam bilgi için his guest post on Matt Snider's blog Check out.

Bu teknik aynı zamanda JavaScript Firefox innerHTML özelliğini kullanarak düğüm içeriğini güncelleme engeller unutmayın. Geçici bir çözüm için bu yazının sonuna bakınız.

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ğini

<?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çerik güncelleniyor

Firefox çalışır bir şekilde bir düğüm içeriğini 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);
    }
};

Matt Snider's post for an explanation of how this works bkz.