javascript - scriverli - meta description lunghezza



Abbrevia il testo lungo in base alla larghezza in pixel (3)

Questo è per il web? Se è così, perché non usare un metodo più semplice come usare css per nascondere l'overflow?

https://src-bin.com

Vorrei abbreviare descrizioni molto lunghe alla larghezza della colonna della tabella disponibile. Ho le informazioni sulla larghezza della colonna in pixel. Ora vorrei convertire questa misura al numero di caratteri, così posso accorciare il testo al numero specificato.

Non ho bisogno di essere corretto al 100%, anche un presupposto quasi funzionerà.


Answer #1

Avvolgi il testo nella cella in un DIV. Questo ti dirà se il testo all'interno del DIV è più grande della cella:

<div id='test' style='width:200px;height:100px;overflow:hidden'>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at felis. Etiam ullamcorper. Aenean fringilla, eros eu dapibus tristique, erat lacus vestibulum metus, nec pharetra leo ante et quam. Nunc ac mi molestie justo placerat laoreet. Morbi eget dolor. Curabitur pretium, mi quis iaculis molestie, dolor ligula sagittis orci, at sodales quam dolor quis sem. Suspendisse vitae risus. Maecenas vestibulum dolor vel augue. Sed purus. Ut nisi massa, vestibulum id, lobortis eget, aliquet eu, enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
</div>
<script type="text/javascript">
alert($('test').scrollHeight)
</script>

Se si desidera troncare alla fine di una parola e aggiungere un puntino di sospensione (...), è possibile, in uno script, iniziare a rimuovere le parole finché l'altezza non è uguale o inferiore al contenitore. (Sto usando Protoype per la scorciatoia $)

Ecco un esempio funzionante:

<div id='test' style='width:300px;height:100px;overflow:hidden'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at felis. Etiam ullamcorper. Aenean fringilla, eros eu dapibus tristique, erat lacus vestibulum metus, nec pharetra leo ante et quam. Nunc ac mi molestie justo placerat laoreet. Morbi eget dolor. Curabitur pretium, mi quis iaculis molestie, dolor ligula sagittis orci, at sodales quam dolor quis sem. Suspendisse vitae risus. Maecenas vestibulum dolor vel augue. Sed purus. Ut nisi massa, vestibulum id, lobortis eget, aliquet eu, enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
</div>
<script type="text/javascript">
function shorten(element) { 
    if($(element).scrollHeight>$(element).getHeight()) {
        var myText = $(element).innerHTML.split(" ")
        myText.length=myText.length-2
        $(element).update(myText.join(" ")+" ...")
        window.setTimeout('shorten("'+element+'")',1)
    }

}
shorten('test')
</script>

Si potrebbe fare con le frasi dividendo su un punto, invece che su uno spazio, ma è necessario un fallback se non è stato trovato alcun periodo o se ciò che è rimasto dopo il troncamento è troppo breve.


Answer #2

La proprietà CSS di cui sta parlando è "text-overflow".

Prova ad aggiungere quanto segue alla classe dell'elemento, sono tutti necessari:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;




label