Determinare la larghezza di stampa di una stringa tramite webapp

https://stackoverflow.com/questions/33893

09-06-2019
|

Domanda

Nel mio (PHP) web app, ho una parte del mio sito che mantiene una cronologia delle ricerche recenti.L'ultima query vengono visualizzati in un riquadro laterale.Se la query di testo è troppo lungo, mi tronca e vedi i puntini di sospensione.Ad esempio:"La mia lunga query è..."

Attualmente, I troncare dopo un certo numero di caratteri.Dal momento che il carattere non è monotype, una query di tutto mi è più stretto di una query di tutti i W.Mi piacerebbe loro di essere tutti circa la stessa larghezza prima i puntini di sospensione.C'è un modo per ottenere approssimativamente larghezza della stringa in modo che i puntini di sospensione per ogni stringa si verificano in circa lo stesso numero di pixel dall'inizio?Fa CSS sono un modo?Non PHP?Questo sarebbe meglio gestito da JavaScript?

Soluzione

C'è un'altra e non è necessario vivere senza i puntini di sospensione!

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

C'è un difetto di questo, se il testo è abbastanza breve per essere visualizzato completamente, i puntini di sospensione sarà ancora visualizzati.

[EDIT:6/26/2009]

Su suggerimento di Potenza-Coder ho rivisto un po'.Ci sono solo due modifiche, l'aggiunta di doctype (vedi note sotto) e l'aggiunta di display: inline-block l'attributo .qrytxt DIV.Qui è come si presenta adesso...

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

Note:

Visto in IE 8.0, Opera 9, FF 3
Un doctype è necessario per IE, per ottenere il display: inline-block per funzionare correttamente.
Se il .qrytxt DIV overflow si verifica in una parola lunga, ci sarà un ampio divario tra i puntini di sospensione e l'ultima parola visibile.Si può vedere questo con la visualizzazione di esempio e di ridimensionare il browser di larghezza in piccoli incrementi.(questo probabilmente esisteva in originale esempio, ho appena può non aver notato poi)

Quindi, di nuovo, un imperfetto CSS-unica soluzione.Javascript può essere l'unica cosa che può ottenere l'effetto perfetto.

[EDIT:6/27/2009]

Qui è un'altra alternativa che utilizza il browser estensioni specifiche.

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

Nota che, per l'esempio di cui sopra, è necessario creare il file xml a cui fa riferimento la -moz-associazione di regola, ellipsis-xbl.xml.Si dovrebbe contenere il seguente codice xml:

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

Altri suggerimenti

Si potrebbe anche abbastanza facilmente utilizzare un po ' di javascript:

document.getElementByID("qrytxt").offsetWidth;

vi darà la larghezza di un elemento in pixel e funziona anche in IE6.Se si aggiunge un intervallo contenente puntini di sospensione alla fine di ogni query di un semplice test logico in JavaScript con un po ' di CSS manipolazione potrebbe essere utilizzato per nascondere/mostrare loro come necessario.

Fa CSS sono un modo?

Non PHP?

Per farlo devi avere il formato del carattere di ogni personaggio, e li applica a tutte le lettere della stringa.Mentre si potrebbe fare questo, utilizzando un disegno di rendering/libreria ImageMagick sul server, non sarebbe davvero il lavoro, perché i diversi browser su diversi sistemi operativi rendering dei font in modo diverso.

Anche se non lavoro, non si vuole farlo, perché sarebbe anche prendere per sempre per il rendering.Il server dovrebbe essere in grado di spingere 1 pagina al secondo (se) invece di diverse migliaia di euro.

Se si può vivere senza il finale ...), quindi si può ben falsi utilizzando div tag e css overflow: hidden, come questo:

.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 dovrebbe essere lasciato fuori di considerazione completamente a causa del fatto che, anche se esiste una funzione progettata per la misura del font, http://www.php.net/imageftbbox non c'è alcun modo per PHP per sapere se il visitatore ha una dimensione minima del carattere di installazione è maggiore del previsto la dimensione del carattere.

@Robert

che cosa succede se si mettono i puntini di sospensione in un div con un basso z-index in modo che quando si sposta a sinistra (per le linee più corte) che ottengono coperto da un immagine di sfondo o qualcosa del genere?

è abbastanza sporca so, ma hey vale la pena provare giusto?

modifica Un'altra idea:determinare la posizione del div contenente i puntini di sospensione con javascript e se non è spinto tutta la strada a destra, a nasconderlo?

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow