jquery плагины для усечения длинной текстовой строки по ширине / высоте контейнера - PullRequest
Новая
       26

jquery плагины для усечения длинной текстовой строки по ширине / высоте контейнера

5 голосов
/ 15 октября 2010

Как видно из заголовка, я хочу обрезать вводимую пользователем текстовую строку в зависимости от ширины и высоты назначенного контейнера.Моя спецификация состоит в том, чтобы обрезать строку, отображать какое-то сообщение, например Read More в конце, и когда пользователь нажимает на нее, текст скользит вниз.

ОБНОВЛЕНИЕ: Ах!Забыл одну вещь.Он должен также обрабатывать многобайтовые символы.

Может кто-нибудь пролить свет на то, какие варианты у меня есть?Плагины jQuery или какой-то отличный фрагмент jquery?

Спасибо и всего наилучшего

1 Ответ

4 голосов
/ 15 октября 2010

Плагин jQuery 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>

Источник:

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

См. Демонстрацию здесь:

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

Удачи, спросите меня, если вам нужны разъяснения!

...