阅读有关数据库结果的更多信息

Question

你好，我的代码很简单，但出于设计目的，我希望保持一切整洁，目前我正在提取所有描述，有些可能很大，有些可能很小，无论如何要公平我决定制作一个阅读更多按钮，一旦我点击它就展开文本，比如，所以不知何故让它显示前 160 个字符......然后 ReadMore link 按钮，当你点击它时它展开并显示全文这是我现在使用的脚本：

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

所以我想知道这是如何完成的，如果可能的话只使用 javascript，谢谢！

Answer 1

使用 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 2

对于PHP方式：

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

当按下阅读更多时。

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

当然你也可以用 Javascript 来做。

Answer 3

虽然您当然可以使用 PHP，但另一种方法是正确使用 css 的文本溢出属性。

这种方法可以减轻服务器的压力，尤其是当页面上有一堆描述时。使用 PHP 连接每个单独的一个是低效的，也不是正确的方法。

删除 class 就简单多了。当你想少展示的时候，你可以把它加回来。

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

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

阅读有关数据库结果的更多信息

Read more on Database result

javascript

php

html

mysql

web