如何使用 jQuery 将段落的原始文本格式放入 HTML 段落元素中

how to fit the original text format of a paragraph into the html paragraph element using jquery?

本文关键字：段落 HTML 元素 格式 原始 jQuery 何使用 文本      更新时间：2023-09-26

我正在我的网站上创建一个客户评论部分页面，我希望用户输入的确切格式显示在页面中。在这里，我使用 jQuery 使用带有更多更少链接的段落元素。我的问题是，如果用户输入长段落集，它会显示超出段落元素的宽度和高度，并且不会保留原始格式。我想根据用户输入的段落区域自动调整段落元素的区域。我该如何解决这个问题？

jQuery/Javascript：

jQuery(function() {
    var minimized_elements = $('p.minimize');
    minimized_elements.each(function() {
        var t = $(this).text();
        if(t.length < 120) return;
        $(this).html(
            t.slice(0,120)+'<span>... </span><a href="#" class="more">More</a>'+
            '<span style="display:none;">'+ t.slice(120,t.length)+' <a href="#"      class="less">Less</a></span>'
            );
    });
    $('a.more', minimized_elements).click(function(event) {
        event.preventDefault();
        $(this).hide().prev().hide();
        $(this).next().show();
    });
    $('a.less', minimized_elements).click(function(event) {
        event.preventDefault();
        $(this).parent().hide().prev().show().prev().show();
    });
});

.CSS

.more {
    width: 500px;
    background-color: #f0f0f0;
    margin: 10px;
}
p {
    padding: 0 0 20px;
}

.HTML

<p id ="content" class="minimize more"  style ="width :500px; height :100px; white-space :pre "> <%# DataBinder.Eval(Container.DataItem,"Comments").ToString() %> </p> 
//where the content of the paragraph came from the database being queried as comments.

原始问题

要使显示注释的部分与内容长度成比例，您需要替换以下 html：

<p id ="content" class="minimize more"  style ="width :500px; height :100px; white-space :pre ">

至 （ min-height ）

<p id ="content" class="minimize more"  style ="width :500px; min-height :100px; white-space :pre ">

你的p，通常是一个具有display:inline属性的元素，以某种方式转向display:block。

评论中的问题

从文本区域获取的文本不包含 html。换行符、多余空格（超过 1 个）和制表符被这样编码，浏览器会忽略。因此，您需要将它们替换为 html 才能正确显示它们。

因此，
'r'n、'r和'n（换行符）变为 <br />
't（选项卡）变为 &nbsp;&nbsp;&nbsp;&nbsp;
（空格）变为&nbsp;

我做了一个小演示供你玩。

（替换字符将在php或javascript中工作）

相关文章：