Bestimmen der Breite einer gedruckten Zeichenfolge durch eine Webanwendung

https://stackoverflow.com/questions/33893

09-06-2019
|

Frage

In meiner (PHP-)Web-App habe ich einen Teil meiner Website, der den Verlauf der letzten Suchanfragen speichert.Die neuesten Abfragen werden in einer Seitenbox angezeigt.Wenn der Abfragetext zu lang ist, schneide ich ihn ab und zeige Auslassungspunkte an.Z.B:„Meine sehr lange Frage ist…“

Derzeit schneide ich nach einer bestimmten Anzahl von Zeichen ab.Da es sich bei der Schriftart nicht um eine Monotypie handelt, ist eine Abfrage aller I enger als eine Abfrage aller W.Ich möchte, dass sie alle vor den Ellipsen ungefähr gleich breit sind.Gibt es eine Möglichkeit, die ungefähre Breite der resultierenden Zeichenfolge zu ermitteln, sodass die Ellipsen für eine bestimmte Zeichenfolge von Anfang an in etwa der gleichen Anzahl von Pixeln auftreten?Hat CSS eine Möglichkeit?Funktioniert PHP?Wäre dies mit JavaScript besser zu bewältigen?

Lösung

Hier ist eine andere Sichtweise darauf und Sie müssen nicht ohne die Auslassungspunkte leben!

<html>
<head>

<style>
div.sidebox {
    width: 25%;
}

div.sidebox div.qrytxt {
    height: 1em;
    line-height: 1em;
    overflow: hidden;
}

div.sidebox div.qrytxt span.ellipsis {
    float: right;
}
</style>


</head>

<body>

<div class="sidebox">
    <div class="qrytxt">
        <span class="ellipsis">&hellip;</span>
        Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
    </div>
    <div class="qrytxt">
        <span class="ellipsis">&hellip;</span>
        Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
    </div>
    <div class="qrytxt">
        <span class="ellipsis">&hellip;</span>
        Short text. Fail!
    </div>
</body>

</html>

Dabei gibt es einen Fehler: Wenn der Text kurz genug ist, um vollständig angezeigt zu werden, werden die Ellipsen weiterhin angezeigt.

[BEARBEITEN:26.06.2009]

Auf Anregung von Power-Coder habe ich dies etwas überarbeitet.Es gibt eigentlich nur zwei Änderungen, die Hinzufügung des doctype (siehe Anmerkungen unten) und die Hinzufügung des display: inline-block Attribut auf dem .qrytxt DIV.So sieht es jetzt aus...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <style>
        div.sidebox 
        {
            width: 25%;
        }

        div.sidebox div.qrytxt
        {
            height: 1em;
            line-height: 1em;
            overflow: hidden;
            display: inline-block;
        }

        div.sidebox div.qrytxt span.ellipsis
        {
            float: right;
        }
</style>
</head>

<body>
    <div class="sidebox">
        <div class="qrytxt">
            <span class="ellipsis">&hellip;</span>
            Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            <span class="ellipsis">&hellip;</span>
            Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            <span class="ellipsis">&hellip;</span>
            Short text. FTW
        </div>
    </div>
</body>
</html>

Anmerkungen:

Angezeigt in IE 8.0, Opera 9, FF 3
A doctype ist erforderlich, damit der IE das erhält display: inline-block richtig zu funktionieren.
Wenn die .qrytxt Der Überlauf von DIV tritt bei einem langen Wort auf. Zwischen den Auslassungspunkten und dem letzten sichtbaren Wort entsteht eine große Lücke.Sie können dies erkennen, indem Sie sich das Beispiel ansehen und die Größe Ihres Browsers in kleinen Schritten ändern.(Das gab es wahrscheinlich auch im Originalbeispiel, vielleicht ist es mir damals aber noch nicht aufgefallen)

Also wieder eine unvollständige reine CSS-Lösung.Javascript ist möglicherweise das einzige, was den Effekt perfekt erzielen kann.

[BEARBEITEN:27.06.2009]

Hier ist eine weitere Alternative, die browserspezifische Erweiterungen verwendet.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <style>
        div.sidebox 
        {
            width: 26%;
        }

        div.sidebox div.qrytxt
        {
            height: 1em;
            line-height: 1em;
            overflow: hidden;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
            -ms-text-overflow:ellipsis;
            -moz-binding:url(ellipsis-xbl.xml#ellipsis);
            white-space:nowrap;
        }
    </style>
</head>

<body>
    <div class="sidebox">
        <div class="qrytxt">
            Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            Short text. FTW
        </div>
    </div>
</body>
</html>

Beachten Sie, dass Sie die XML-Datei erstellen müssen, auf die die -moz-binding-Regel verweist, damit das obige Beispiel funktioniert. ellipsis-xbl.xml.Es sollte die folgende XML enthalten:

<?xml version="1.0" encoding="UTF-8"?>
  <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>

Andere Tipps

Sie könnten auch ganz einfach ein bisschen Javascript verwenden:

document.getElementByID("qrytxt").offsetWidth;

gibt Ihnen die Breite eines Elements in Pixel an und funktioniert sogar in IE6.Wenn Sie am Ende jeder Abfrage eine Spanne anhängen, die Ellipsen enthält, könnte ein einfacher logischer Test in JavaScript mit ein wenig CSS-Manipulation verwendet werden, um sie nach Bedarf auszublenden/einzublenden.

Hat CSS eine Möglichkeit?

NEIN

Funktioniert PHP?

NEIN

Dazu müssten Sie die Schriftartmetriken für jedes Zeichen abrufen und sie auf alle Ihre Buchstaben in Ihrer Zeichenfolge anwenden.Sie könnten dies zwar tun, indem Sie eine Zeichnungs-/Rendering-Bibliothek wie ImageMagick auf dem Server verwenden, aber das würde nicht wirklich funktionieren, da verschiedene Browser auf verschiedenen Betriebssystemen Schriftarten unterschiedlich darstellen.

Selbst wenn es funktionieren würde, würden Sie es nicht tun wollen, da das Rendern ebenfalls ewig dauern würde.Ihr Server wäre in der Lage, 1 Seite pro Sekunde (wenn überhaupt) statt mehreren Tausend zu pushen.

Wenn Sie ohne das Nachstellen leben können ..., dann können Sie es gut vortäuschen, indem Sie es verwenden div Tags und CSS overflow: hidden, so was:

.line_of_text {
    height:1.3em;
    line-height:1.3em;
    overflow:hidden;
}

<div class="line_of_text"> Some long text which will arbitrarily be cut off at whatever word fits best</div>

PHP sollte völlig außer Acht gelassen werden, da es zwar eine Funktion zum Messen von Schriftarten gibt, http://www.php.net/imageftbbox , gibt es für PHP keine Möglichkeit herauszufinden, ob der Besucher eine Mindestschriftgröße eingestellt hat, die größer als Ihre erwartete Schriftgröße ist.

@Robert

Was wäre, wenn Sie die Ellipsen in ein Div mit einem Tief einfügen würden? z-index sodass sie bei einer Bewegung nach links (für kürzere Zeilen) von einem Hintergrundbild oder so etwas verdeckt werden?

Es ist ziemlich abgedroschen, ich weiß, aber einen Versuch ist es wert, oder?

bearbeiten Eine andere Idee:Bestimmen Sie die Position des Div, das die Ellipsen enthält, mit Javascript und verstecken Sie es, wenn es nicht ganz richtig ist.

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow