javascript - 根据文本长度动态更改元素的高度

Question

我正在使用 cordova 和 jquery mobile，我正在开发一个可以发送通知的应用程序。在通知面板中，我显示所有收到的通知。

所以那个通知的 html 标记是这样的:

 for(var count = 0; count < info.data.length; count++){
    var shortmessage = info.data[count][3];
    var category = info.data[count][4];
    var typeOf = info.data[count][5];
    var style = '';

    if(typeOf === "warning"){
        imgPath = 'img/icons/alarm.png';
    } else {
        imgPath = 'img/icons/alert.png';
    }

    console.log(shortmessage, shortmessage.length);

     // if long message, set the style
    if ( shortmessage.length > 40 ){
        style = 'min-height: 70px';
    }else if ( shortmessage.length > 65 ){
        style = 'min-height: 80px !important';
    }else if ( shortmessage.length > 75 ){
        style = 'min-height: 100px !important';
    }

if (category === 'vertrek'){
               departureHtml = `
                ${departureHtml}
                <div class='notification-item' style='${style}'>
                    <div class='ui-grid-a notification-grid'>
                        <div class='ui-block-a'>
                            <img class='notification-image' src='${imgPath}'>
                        </div>
                        <div class='ui-block-b'>
                            <span class='notification-text'>${shortmessage}</span>
                        </div>
                    </div>
                </div>`;

            $('.departure-notification-append').empty().prepend(departureHtml);
        }

        if (category === 'inchecken'){
            incheckHtml = `
                ${incheckHtml}
                <div class='notification-item' style='${style}'>
                    <div class='ui-grid-a notification-grid'>
                        <div class='ui-block-a'>
                            <img class='notification-image' src='${imgPath}'>
                        </div>
                        <div class='ui-block-b'>
                            <span class='notification-text'>${shortmessage}</span>
                        </div>
                    </div>
                </div>`;

            $('.check-in-notification-append').empty().prepend(incheckHtml);
        }

这是 5 个类别中的两个，但它似乎比将 70px 的高度 分配给所有 notification-items 大于 40。 但它不会改变大于 65 和 75 的消息的高度。

所以我的问题是如何根据 notification-text 中的文本动态设置 notification-item 的高度

Answer 1

设置 height: auto 将允许元素动态调整大小以占据呈现其内容所需的任何高度。

我会使用填充来实现额外的高度操作，而不是使用高度属性。