Wtyczki jquery do przycinania długich ciągów tekstowych według szerokości/wysokości kontenera

Question

Jak mówi tytuł, chcę skrócić łańcuch tekstowy wprowadzany przez użytkownika na podstawie szerokości i wysokości wyznaczonego kontenera. Moja specyfikacja polega na obcięciu łańcucha, wyświetleniu na końcu komunikatu, np. Read More, a gdy użytkownik go kliknie, tekst zostanie zsunięty w dół.

AKTUALIZACJA: Ah! Zapomniałem jednej rzeczy. Powinien także obsługiwać znaki wielobajtowe.

Czy ktoś może rzucić trochę światła na opcje, które mam? wtyczki jQuery lub jakiś sprytny fragment jquery?

Dzięki i Pozdrawiam

Answer 1

jQuery Plugin Expander:

HTML:

<div class="expandable"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. 
    </p> 
    <p>Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
    officia deserunt mollit anim id est laborum. 
    </p> 
    </div> 

Javascript:

<script src="jquery.js" type="text/javascript"></script> 
<script src="jquery.expander.js" type="text/javascript"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 

    // simple example, using all default options 
    $('div.expandable p').expander(); 

    // *** OR *** 

    // override some default options 
    $('div.expandable p').expander({ 
    slicePoint:  80, // default is 100 
    expandText:   '[...]', // default is 'read more...' 
    collapseTimer: 5000, // re-collapses after 5 seconds; default is 0, so no re-collapsing 
    userCollapseText: '[^]' // default is '[collapse expanded text]' 
    }); 

}); 
</script> 

Źródło:

http://plugins.learningjquery.com/expander/index.html

Zobacz demo tutaj:

http://plugins.learningjquery.com/expander/demo/index.html

Powodzenia pytaj jeśli potrzebujesz wyjaśnień!