Подробнее о результатах базы данных

Question

Привет, мой код довольно прост, но Id как для целей дизайна, чтобы держать все в чистоте, на данный момент Im тянет все описание, которое похоже. Некоторые могут быть огромными, другие могут быть довольно маленькими, так или иначе сделайте это честно. Я решил сделать кнопку «Читать дальше», и как только я нажму на нее, просто расширьте текст таким образом: SO, как-то, чтобы показать первые 160 символов после этого ... затем кнопку ссылки ReadMore, которая, когда вы нажимаете кнопку, расширяется и отображается весь текст Heres моего сценария, который я использую сейчас:

<p><?PHP echo $thismovie['description']; ?></p> <div style="text-align:right"> 

Так что я хотел бы знать, как это делается, и, если это возможно только с помощью JavaScript, спасибо!

Answer 1

для PHP способом:

$firstdesc=substr($thismovie['description'], 0, 160); 

и когда для чтения более прессованный.

$totaldesc=substr($thismovie['description'], 160); 

Конечно, вы можете это сделать и с помощью Javascript.

Answer 2

использовать стиль css `text-overflow: ellipsis; и jquery для полной функции.

$('#read-more').click(function() { 
 
    $('#description').css('width','100%'); 
 
});

#description { 
 
    white-space: nowrap; 
 
    width: 12em; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="description">This is some long text that will not fit in the box</div> <a id="read-more" href="#">Read More</a>

Answer 3

Хотя вы, конечно, можете использовать PHP, другим способом является правильное использование свойства text-overflow css.

Этот метод будет оказывать меньшее влияние на сервер, особенно если на странице имеется множество описаний. Использование PHP для конкатенации каждого из них неэффективно и не является правильным способом для этого.

Удаление класса намного проще. И вы можете добавить его обратно, когда хотите показать меньше.

<style> 
    .ellipsis { 
     white-space: nowrap; 
     text-overflow: ellipsis; 
     overflow: hidden; 
     height: 14px; 
    } 
    .description { 
     width: 300px; 
     background: #ccc; 
     padding: 3px; 
     margin-top: 30px; 
     margin-bottom: 0; 
    } 
</style> 

<!-- It is likely you would use a PHP loop for this but for illustration 
    purposes I've listed them out --> 

<p class="description ellipsis"><?=$movie[0]['description']?></p> 
<a href="#" class="read-more">Read More</a> 

<p class="description ellipsis"><?=$movie[1]['description']?></p> 
<a href="#" class="read-more">Read More</a> 

<p class="description ellipsis"><?=$movie[2]['description']?></p> 
<a href="#" class="read-more">Read More</a> 

<!-- use as many as you want with no additional strain on server. --> 

С Jquery ... http://jsfiddle.net/kx2nbv3z/

<!-- Include jQuery --> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
    $(document) 
     .on('click','.read-more',function() { 
      $(this).removeClass('read-more').addClass('show-less').html('Show Less').prev('.description').removeClass('ellipsis'); 
     }) 

     .on('click','.show-less',function() { 
      $(this).removeClass('show-less').addClass('read-more').html('Read More').prev('.description').addClass('ellipsis'); 
     }) 
    ; 
</script> 

С PURE JAVASCRIPT ... http://jsfiddle.net/8wsbw0u8/

<script> 


if (document.body.addEventListener) { 
    document.body.addEventListener('click',yourHandler,false); 
} 
else { 
    document.body.attachEvent('onclick',yourHandler);//for IE 
} 

function yourHandler(e) { 
    e = e || window.event; 
    var target = e.target || e.srcElement; 
    prev = target.previousSibling.previousSibling; 
    if (target.className.match(/read-more/)) { 
     target.className="show-less"; 
     target.innerHTML = "Show Less"; 
     prev.setAttribute("class","description"); 
     console.log(prev); 
    } 
    else if (target.className.match(/show-less/)) { 
     target.className="read-more"; 
     target.innerHTML = "Read More"; 
     prev.setAttribute("class","description ellipsis"); 
    } 
} 
</script>