HTML: wie Tabelle schmaler, text-overflow soll cut-off mehr und noch mehr text

Ich habe eine web-Seite, eine HTML-Tabelle generiert, die durch eine ASP.NET Kontrolle. In der oberen Zeile der Tabelle emuliert eine Symbolleiste. Dass die Obere Reihe gelegt, so in der Art wie dieses:

<tr>
  <td style="white-space:nowrap;">
    <span>Very long title</span>&nbsp;
  </td>
  <td>
    { bunch of hyperlinks with background images, emulating a toolbar }
  </td>
</tr>

Ich bin stecken mit der Tatsache, dass dies ist eine Tabelle, die mit dem Inhalt der Titel-Bereich gelegt wird, in einer Zeitspanne, und wahrscheinlich ist, dass inline-style-Angabe keine Verpackung.

Diese Tabelle soll zu schmal, selbst wenn die Seite verengt, und das tut Sie ziemlich gut. Allerdings, wenn der eigentliche Titel-text (kann variieren) ist zu lang, es effektiv dient als eine Begrenzung auf, wie eng die Tabelle machen kann, die führen kann zu überschneidungen mit anderen Dingen auf der Seite. (Ich bin mit IE8, BTW.)

Ich versucht, die Anwendung overflow:hidden, text-overflow:ellipsis, und display: inline-block auf die Spanne und das hinzufügen eines Wertes für die Zelle in der Tabelle, die alle durch ein stylesheet. (Display:block auf die Spannweite verdoppelt sich die Höhe der Zeile, die ich nicht will, so inline-block war meine Wahl.) Die Titel text erschien gekürzt, genauso wie ich es wollte. Aber die Tabelle würde nicht schmaler.

Nach Herumspielen ändern von Werten und Stilen durch IEDT habe ich festgestellt, dass, wenn herauszufinden, wie eng die Tabelle bekommen konnte, der text war noch immer zählen seine volle Länge. Die Zeitspanne war relativ kurz, nur der text, erschienen in der Spanne erschien, aber für table-cell Breite Zwecken, der text war noch alles da.

Habe ich nicht, dass dieses Phänomen dokumentiert und überall, aber vielleicht habe ich einfach nicht weit genug herum. 🙂 Wenn text-overflow kann mir nicht helfen, ich denke, ich werde dynamisch kürzen Sie den Titel durch Skripts, die ich lieber nicht tun. Gibt es eine Möglichkeit, das zu tun, was ich will, die ausschließlich durch CSS?

InformationsquelleAutor Ann L. | 2011-10-27