Nochmal ein Beitrag zum Thema Textbegrenzung. Längere Texte abzuschneiden, weil sie anderenfalls bestimmte Rahmengrößen brechen würden, ist eine immer wiederkehrende Anforderung. Solche Kürzungen kann man zum Teil serverseitig erledigen – aber das ist nicht unter allen Umständen sinnvoll. Schwierig wird es immer dann, wenn diese Kürzung nicht auf einer definierten Zeichenlänge basiert, sondern auf einer definierten Größe (bspw. innerhalb einer Tabelle, oder einer Schaltfläche). Der Internet Explorer kennt die CSS-Eigenschaft text-overflow, eine entsprechende Implementierung im Firefox fehlt. Es geht trotzdem…

In meinem Artikel Text begrenzen, aber richtig hatte ich einige serverseitige Lösungen zum Begrenzen von Text vorgestellt. Solche Ansätze scheitern, wenn es bei der Begrenzung gar nicht um die Anzahl von Zeichen geht, sondern layoutabhängig sind. Die naheliegende Verwendung der CSS-Eigenschaft text-overflow wäre ideal, hier wird der Text nicht nur abgeschnitten, sondern in der Form Dieser Text geht noch weiter … dargestellt:

Beispielcode – die HTML Syntax

<div class="fixed-box">
  <p class="truncate">Ein viel zu langer Text für das Elternelement.</p>
</div>

Legt man folgenden CSS Code zugrunde, dann wird der Text zwar in allen Browsern “abgeschnitten” (durch overflow:hidden), aber nur im Internet Explorer und im Webkit (Safari, Chrome) greift text-overflow mit der Ausprägung ellipsis:

.fixed-box {
  width:100px;
}
 
.truncate {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

Aber wie hilft man Firefox auf die Sprünge? Sicher – man könnte sich über JavaScript helfen, bei Ajaxian wird auf bspw. ein entsprechendes JQuery Plugin verwiesen. Es gibt aber noch eine Alternative und die basiert auf XBL. XBL (XML Binding Language) ist eine XML-basierte Auszeichnungssprache, mit der man das Verhalten und Aussehen von XML- und HTML-Elementen beschreiben kann. Dies geschieht über sogenannte Bindings (Bindungen) in XBL, die an ein solches Element angehängt werden. Die Bindings werden in einer separaten XBL-Datei definiert. Über ein Binding kann auch Text in das XML- oder HTML-Element eingefügt werden. Ein Binding kann an mehrere unterschiedliche Elemente angehängt werden. Der Code für die Implentierung von text-overflow ellipsis:

<?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>

Cross Browser text-overflow CSS Syntax

Die XML Syntax wird als Datei abgespeichert und dann über CSS referenziert:

.truncate {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  /* Firefox mit text-overflow */
  -moz-binding: url(ellipsis.xml#ellipsis);
  /* und nun auch noch Opera */
  -o-text-overflow:ellipsis;
}

Einen kleinen Schönheitsfehler hat die Sache im Firefox Version 3.6. Aufgrund eines Bugs bei -moz-binding werden einmal gesetzte Werte nicht wieder geändert. Heißt bei Fluid-Designs bleibt der “ellipsis” Effekt auch dann noch vorhanden, wenn er eigentlich nicht mehr benötigt wird.

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
<binding id="none">
  <content><children/></content>
</binding>
<binding id="ellipsis">
  <content>
    <xul:label crop="end"><children/></xul:label>
  </content>
  <implementation>
    <field name="label"> document.getAnonymousNodes( this )[ 0 ] </field>
    <field name="style"> this.label.style </field>
    <property name="display">
       <getter>
         this.style.display
       </getter>
       <setter>
         if( this.style.display != val ) this.style.display= val
       </setter>
    </property>
    <property name="value">
      <getter>
         this.label.value
      </getter>
      <setter>
        if( this.label.value != val ) this.label.value= val
      </setter>
    </property>
    <method name="update">
      <body>
         var strings= this.textContent.split( /\s+/g )
         if( !strings[ 0 ] ) strings.shift()
         if( !strings[ strings.length - 1 ] ) strings.pop()
         this.value= strings.join( ' ' )
         this.display= strings.length ? '' : 'none'
      </body>
    </method>
    <constructor> this.update() </constructor>
  </implementation>
  <handlers>
    <handler event="DOMSubtreeModified"> this.update() </handler>
  </handlers>
</binding>
</bindings>

Dafür ist der erwähnte Bug bei dynamisch modifizierten Elementen (sei es über Javascript oder flexibel skalierbare Boxen) nicht mehr aktuell und kann gestrichen werden (wurde gestrichen). Hier sind noch einmal alle Tests zusammgefasst zu finden.