Как вписать исходный текстовый формат абзаца в элемент HTML-абзаца с помощью jquery?

Я создаю страницу раздела комментариев клиента на своем веб-сайте, и я хочу, чтобы точный формат вводился пользователем для показа на странице. Здесь я использую элемент абзаца с меньшей ссылкой, используя 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.