问题很简单:
使用tinyMCE,我将html数据存储到数据库中。然后在主页上,我显示了我已插入数据库的5个最新帖子。我想将这些帖子中的每一个裁剪到指定长度,如果它们超过它并放置continue reading
链接(这里可以是一个柔和的裁剪,不必是严格的)。
使用php的wordwrap
函数裁剪字符串会很容易,但由于字符串由html组成,我不想通过从错误的地方裁剪来破坏html代码。
所以问题是:是否有一种简单的方法来裁剪它,(也可以是css,javascript解决方案)或者我是否编写了一个包含大量检查的长函数来实现这样的基本功能?我正在考虑使用DOM
类但在创建函数之前我只想问你们。
修改
造型对我来说至关重要。因此,不可能剥离标签。
提前致谢。
答案 0 :(得分:2)
一种可能的解决方案是剥离标签,如果此HTML的样式不重要,那么您可以在任何地方剪切: http://php.net/manual/es/function.strip-tags.php
CSS3浏览器的另一个解决方案是使用文本溢出,请阅读更多相关信息: http://davidwalsh.name/css-ellipsis
答案 1 :(得分:0)
假设您使用jQuery
javascript
$(function () {
$('p').filter(function () {
return $(this).height() > 50;
}).addClass('collapsed').css('position', 'relative').append('<a href="#" class="expand">read more</a>');
$('.expand').on('click', function(){
if($(this).parents('.collapsed').length)
$(this).parents('.collapsed:first').removeClass('collapsed')
else
$(this).parents(':first').addClass('collapsed')
})
})
css
.collapsed{overflow: hidden; height: 20px; margin-bottom: 10px; position: relative}
.expand{position: absolute; right: 0; bottom: 0; background: #fff; padding: 0 0 0 15px;}
只是一个概念证明。需要JS优化