Wie kann ich eine Breite so einstellen, dass sie seinen angezeigten Inhalt visuell abschneiden?

StackOverflow https://stackoverflow.com/questions/480722

Frage

Ich versuche, eine Spaltenbreite einer Tabelle festzulegen, die gut funktioniert, bis sie an den Punkt gelangt, an dem Kinderelemente visuell verkürzt werden. Dann wird es nicht kleiner sein. ("Visuell verkürzt"-Was scheint nicht hinter der nächsten Spalte versteckt zu sein)

Hier ist ein Beispielcode, um mein Problem zu demonstrieren:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript" type="text/javascript">
    var intervalID = null;

    function btn_onClick()
    {
        // keep it simple, only click once
        var btn = document.getElementById("btn");
        btn.disabled = true;     
        // start shrinking
        intervalID = window.setInterval( "shrinkLeftCell();", 100);
    }

    function shrinkLeftCell()
    {
        // get elements
        var td1 = document.getElementById("td1");
        var td2 = document.getElementById("td2");

        // initialize for first pass
        if( "undefined" == typeof( td1.originalWidth))
        {
            td1.originalWidth = td1.offsetWidth;
            td1.currentShrinkCount = td1.offsetWidth;
        }

        // shrink and set width size
        td1.currentShrinkCount--;
        td1.width = td1.currentShrinkCount;  // does nothing if truncating!

        // set reporting values in right cell
        td2.innerHTML = "Desired Width : [" 
                    + td1.currentShrinkCount 
                    + "], Actual : [" 
                    + td1.offsetWidth + "]";

        // Stop shrinking
        if( 1 >= td1.currentShrinkCount)
            window.clearInterval(intervalID);
    }
</script>
</head>
<body>
    <table width="100%" border="1">
        <tr>
            <td id="td1">
                Extra_long_filler_text
            </td>
            <td id="td2">
                Desired Width : [----], Actual : [----]
            </td>
        </tr>
    </table>

    <button id="btn" onclick="btn_onClick();">Start</button>
</body>
</html>

Ich habe versucht, die Breite auf unterschiedliche Weise einzulegen, einschließlich

td1.offsetWidth = td1.currentShrinkCount;

und

td1.width = td1.currentShrinkCount + "px";

und

td1.style.width = td1.currentShrinkCount + "px";

und 

td1.style.posWidth = td1.currentShrinkCount;

und 

td1.scrollWidth = td1.currentShrinkCount;

und 

td1.style.overflow = "hidden";
td1.width = td1.currentShrinkCount;

und 

td1.style.overflow = "scroll";
td1.width = td1.currentShrinkCount;

und 

td1.style.overflow = "auto";
td1.width = td1.currentShrinkCount;

Mir ist klar, dass ich wahrscheinlich Divs verwenden könnte, aber ich würde es vorziehen, nicht zu sein, da die Tabelle aus einer gebundenen Kontrolle erzeugt wird, und ich möchte nicht wirklich in die Umschreibung von ASP.NET -Steuerelementen eingehen.

Trotzdem dachte ich, als letzter Grabenanstrengung konnte ich zumindest den Inhalt eines TD1 mit einem DIV einwickeln, und der Überlauf würde sich um die Dinge kümmern, aber sogar ersetzen

<td id="td1">
    Extra_long_filler_text
</td>

mit

<td id="td1" style="overflow:hidden;">
    <div style="margin=0;padding:0;overflow:hidden;">
        Extra_long_filler_text
    </div>
</td>

hat nicht funktioniert.

Weiß jemand, wie ich eine Breite einstellen kann, um seinen Inhalt visuell abzuschneiden?

Btw-My Target Browser ist IE7. Andere Browser sind derzeit nicht wichtig, da dies eine interne App ist.

War es hilfreich?

Lösung

Ich habe gerade versucht, hinzuzufügen table-layout: fixed; zum <table> Und es hat bei IE7 für mich funktioniert.

In einem festen Tabellenlayout hängt das horizontale Layout nur von der Breite der Tabelle, der Breite der Säulen und nicht vom Gehalt der Zellen ab

Kasse die Dokumentation.

Andere Tipps

CSS -Lösung

"Truncate" ist möglicherweise nicht das Wort, das Sie suchen. Vielleicht möchten Sie nur die überfüllten Zeichen verbergen. Wenn dies der Fall ist, untersuchen Sie den CSS-Property-Überlauf, der alle Inhalte verbergen, die über die erklärten Grenzen seines Containers hinausgehen.

td div.masker {
  height:25px;
  width:100px;
  overflow:hidden;
}

<td>
  <div class="masker">
    This is a string of sample text that
    should be hidden when it reaches out of the bounds of the parent controller.
  </div>
</td>

JavaScript -Lösung

Wenn Sie den Text im Container tatsächlich abschneiden möchten, müssen Sie ein Zeichen von rechts entfernen, die Breite des übergeordneten überteilen und die Zeichen weiter entfernen und die übergeordnete Breite testen, bis die übergeordnete Breite mit der deklarierten Breite übereinstimmt.

while (parent.width > desiredWidth) {
  remove one char from right-side of child-text
}

<td id="td1" style="overflow-x:hidden;">

Sollte sein 

<td id="td1" style="overflow:hidden;">

Overflow-X ist ein Microsoft CSS-Attribut, das jetzt Teil von CSS3 ist. Ich würde mich an das ältere Überlaufattribut halten.

BEARBEITEN:

Wie Paolo erwähnt, müssen Sie auch Tischlayout hinzufügen: behoben; und geben Sie die Breite der Tabelle an. Ein vollständiges Beispiel folgt.

<html>
<head>
<style>
    table
    {

        table-layout:fixed;
        width:100px;
        }
td
{
    overflow:hidden;
    width:50px;
    border-bottom: solid thin;
    border-top:solid thin;
    border-right:solid thin;
    border-left:solid thin;

}
</style>
</head>
<body>
<table>
<tr><td>Some_long_content</td><td>Short</td></tr>
</table>
</body>
</html>

Soweit ich weiß, wird sich eine Tischzelle immer erstrecken, um ihren Inhalt aufzunehmen.

Haben Sie darüber nachgedacht, JavaScript zu verwenden, um die Daten in Tabellenzellen mit mehr als einer bestimmten Menge an Inhalten dynamisch abzuschneiden? Alternativ können Sie dies einfacher Serverseite tun.

Sie können JQuery oder Plain JavaScript verwenden, um den Inhalt Ihrer Zellen mit Div -Tags zu umgeben und eine feste Breite und einen Überlauf festzulegen: Stattdessen versteckt. Nicht schön, aber es würde funktionieren.

ETA:

<td><div style="width:30px;overflow:hidden">Text goes here</div></td>

Da das Div das Begrenzungselement ist, sollte hier die Breite festgelegt werden.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top