Zeichenfolge basierend auf der Pixelbreite abschneiden

Ich versuche, eine Zeichenfolge in einen bestimmten Bereich passen zu lassen (td) ohne Zeilenumbruch. Das Problem ist: Es muss …

• Beim Ändern der Größe anpassen
• Sich einfügen N Arten der Auflösung
• Hinzufügen ... am Ende, wenn es nötig ist (und nicht, wenn es nicht nötig ist)
• Akzeptiere die Änderung von font-size, font-weightUnd font-family

Basierend auf den Antworten auf Novons Frage habe ich den folgenden Code erstellt:

CSS (// Ich füge nur ein paar Stile hinzu, um die Grenze zu durchbrechen)

.truncated { display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

jQuery (// Alle td finden, die a enthalten .truncated Element. Ermitteln der tatsächlichen Breite (durch Entfernen des Inhalts und erneutes Hinzufügen) des td. Anwenden von minWidth bei Bedarf auf die td)

jQuery('.truncated').closest('td').each(function() {
    var text = jQuery(this).text();
    var widthOriginal = jQuery(this).width();
    var widthEmpty = jQuery(this).text('').width();
    jQuery(this).text(text);
    if(widthOriginal >= widthEmpty){
        var width = (parseInt(widthEmpty) - 10) + 'px';
        jQuery(this).css('maxWidth', width);
        jQuery(this).text(text + '...');
    }
});

Das Ergebnis (wie vom obigen Code erwartet) ist:

aber es sollte sein:

Ich dachte, vielleicht versuche ich, den ersten zu finden line des Strings entfernen und den Rest entfernen, habe aber keine Möglichkeit gefunden, das zu tun (und für meinen Geschmack ist das eine Menge „Workaround“). Gibt es einen besseren Weg, das zu tun?

Das Abschneiden einzeiliger Texte kann einfach mit CSS erreicht werden text-overflow Eigenschaft, die von allen gängigen Browsern unterstützt wird, einschließlich IE seit Version 6.

Die Sache ist, dass text-overflow allein bringt nicht viel. Es definiert nur, was passieren wird wenn es welche gibt Text läuft über den Container. Um also Ergebnisse zu sehen, müssen wir den Text zunächst überlaufen lassen, indem wir ihn auf eine einzelne Zeile zwingen. Es ist auch wichtig, die einzustellen overflow Eigenschaft des Containers:

.truncated {
    display: block;
    white-space: nowrap; /* forces text to single line */
    overflow: hidden;
    text-overflow: ellipsis;
}

jsFiddle-Beispiel: https://jsfiddle.net/x95a4913/

Dokumentation zum Textüberlauf: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Sie können dies mit reinem CSS tun, siehe diesen Link als Referenz:

Leitungsklemmung

Fügen Sie diese zu Ihrem CSS hinzu:

.truncated {
  display: -webkit-box;
  -webkit-line-clamp: 1; // amount of line you want
  -webkit-box-orient: vertical;  
}

Oder Sie können es mit clamp.js versuchen

https://github.com/josephschmitt/Clamp.js

text-overflow: ellipsis

scheint eine reine CSS-Lösung zu sein
http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

Wenn Sie das Tabellenlayout auf „Fest“ setzen und das td Überlauf als hiddenkönnten Sie Auslassungspunkte als Float-Right voranstellen div wenn das tdDie Scrollbreite von ist größer als die Clientbreite.

Hier ist das CSS, das Stile enthält, um ein Durchscheinen in der Tabelle zu verhindern:

table {
  table-layout:fixed;
  white-space:nowrap;
  width:500px;
  border-spacing: 0px;
  border-collapse: separate;    
}

td {
  overflow:hidden;
  border:1px solid #ddd;
  padding:0px;
}

.hellip {
  padding-left:0.2em;
  float:right;
  background:white;
  position:relative;
}

jQuery:

$('td').each(function() {
  if($(this)[0].scrollWidth > $(this).width()) {
    $(this).prepend('<div class="hellip"">&hellip;</div>');
  }
});

Demo unter: http://jsfiddle.net/5h798ojf/3/

Um dies zu erreichen, brechen Sie den Text zweimal um:

<style type="text/css">

.relative_wrap {
    height: 1em;
    position: relative;
}

.absolute_wrap {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    top: 0px;
    white-space: nowrap;
}

</style>


<table>
    <tbody>
        <tr>
            <td>
                <div class="relative_wrap">
                    <div class="absolute_wrap">
                            LONG TEXT HERE
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Da Sie jQuery verwenden, ist es einfach:

$('.truncated').wrap('<div class="relative_wrap"><div class="absolute_wrap"></div></div>');