只想渲染或显示文本中的几行答案

【问题标题】：Want to render or show only few lines from text只想渲染或显示文本中的几行
【发布时间】：2026-02-17 06:10:02
【问题描述】：

我正在使用 Summernote 编辑器来编写博客和 sqlalchemy 来存储博客数据。所有功能工作正常。现在在主页上，我想展示我无法做到的每个博客的几行。

我在 views.py 上尝试了几个选项，但它引发了分页错误。我还尝试了一些拆分和切片选项，但由于编辑器 html 和实际文本而没有成功。

用于获取博客文章数据的 View.py。

blog_posts = BlogPost.query.order_by(BlogPost.date.desc()).paginate(page=page,per_page=5)

index.html 用于呈现博客文章数据。这是在for循环中

<p>{{ post.text|safe }}</p>

数据（html + 实际文本）存储在文本（数据类型）列中的 sqlite 表中，当您阅读此问题时，它只会显示实际文本

<p style="margin-top: 0.5em; margin-bottom: 0.5em; line-height: inherit; color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; letter-spacing: normal; word-spacing: 0px;"><span style="font-size: 10px; font-family: Arial;">?</span><span style="font-family: Arial;">?</span><b><span style="font-family: Arial;">Automation</span></b><span style="font-family: Arial;">&nbsp;is the technology by which a process or procedure is performed with minimal human assistance.</span><sup id="cite_ref-1" class="reference" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-size: 11.2px;"><a href="https://en.wikipedia.org/wiki/Automation#cite_note-1" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><span style="font-family: Arial;">[1]</span></a></sup><span style="font-family: Arial;">&nbsp;Automation&nbsp;</span><sup id="cite_ref-Rifkin_1995_2-0" class="reference" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-size: 11.2px;"><a href="https://en.wikipedia.org/wiki/Automation#cite_note-Rifkin_1995-2" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><span style="font-family: Arial;">[2]</span></a></sup><span style="font-family: Arial;">&nbsp;or automatic control is the use of various&nbsp;</span><a href="https://en.wikipedia.org/wiki/Control_system" title="Control system" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><span style="font-family: Arial;">control systems</span></a><span style="font-family: Arial;">&nbsp;for operating equipment such as machinery, processes in factories, boilers and heat treating ovens, switching on telephone networks, steering and stabilization of ships, aircraft and other applications and vehicles with minimal or reduced human intervention.</span></p><p style="margin-top: 0.5em; margin-bottom: 0.5em; line-height: inherit; color: rgb(34, 34, 34); font-family: sans-serif; font-size: 14px; letter-spacing: normal; word-spacing: 0px;"><br></p>

预期结果 - 我只想显示 3 - 5 行文本。

【问题讨论】：

你试过了吗？ jinja.pocoo.org/docs/dev/templates/#truncate
是的 post.text|safe - 给我所有的文本，post.text|truncate(150) - 给我编辑器的所有 html 标签 + 数据（但是 html 标签很大）
为什么不结合安全过滤器和截断过滤器
合并时不工作。

标签： python flask text jinja2 flask-sqlalchemy

【解决方案1】：

您需要的是显示/隐藏更多内容按钮，如下面的代码所示。

这里我将字符限制设置为 30 或更多。如果字符超过 30，则会出现阅读更多按钮。您也可以隐藏内容。

您可以调整您的字符数限制以适应您的选择。这可以使用 Jquery/Ajax 和一些小的 css 来实现，如代码所示。

尝试下面的代码并确保您已连接到互联网，以便加载使其工作的 jquery 文件。

在您的情况下，您需要将 类文本 传递给您的 html 段落元素如下所示

<p class="text">{{ post.text|safe }}</p>

这是代码示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    function breakWords(paragraph, showtext){


        var words = paragraph.split(' ');

        var newText = '';

        for(i=0; i<words.length; i++){


            if(i<= showtext){

                newText += words[i] + ' ';

            }else {

                if (i == (showtext + 1)) newText += '... <span class="fulltext hide">';     

                newText += words[i] + ' ';

                if (words[i+1] == null) newText += '</span><a href="#" class="links"> &raquo; read more</a>';

            }

        }

        return newText;

    }


    $('.text').each(function () {

            $(this).html(breakWords($(this).html(), 10));

            $(this).children('span').hide();


        }).click(function () {


            var fulltext = $(this).children('span.fulltext');
            var links = $(this).children('a.links');


            if (fulltext.hasClass('hide')) {

                fulltext.show(10);
                links.html(' &raquo; hide');        
                fulltext.removeClass('hide');

            } else {

                fulltext.fadeOut(10);
                links.html(' &laquo; read more');           
                fulltext.addClass('hide');

            }

            return false;

        });

});

</script>

<style>


.links{color:#F60; font-weight:bold;text-decoration:none;}
</style>

</head>

<body>

<div id="textbox"> 
<p class="text">

The man behind my mystery. It was during the birthday celebration of David frank my first love that I 
met a young businessman who wons my heart over with enticing material gift. catapults me unto of the world promise me.
 a bliss.  
The man behind my mystery. It was during the birthday celebration of David frank my first love that I 
met a young businessman who wons my heart over with enticing material gift. catapults me unto of the world promise me.
 a bliss.</p>
</div>


</body>
</html>

来源link

【讨论】：

{{ post.text|safe }} 我认为安全过滤器不允许我阅读 innerhtml 或 html。尝试了各种选择都没有成功。另外我会通过 python 或 Jinja 寻找一些选项。