Question

我有一段Jquery从youtube中提取评论并在页面上发布，但是，就目前而言，评论的边框是标准尺寸。如果可能的话，我想要一些方法让它扩展到评论区域中的文本数量。

当前的CSS：

.videoComments {
    border: 1px solid #000;
    margin-bottom: 20px;
}
.author {
    font-size: 13px;
    font-weight: bold;
    color: grey;
}

Answer 1

为什么不这样做？

http://jsfiddle.net/8JLH7/9/

添加

.videoComments {
  float:left;
  clear:both;
}

Answer 2

我不知道如何更新小提琴，但这里是您需要的代码：

的jQuery

$(document).ready(retriveComments);

function retriveComments() {
$.get("https://gdata.youtube.com/feeds/api/videos/jofNR_WkoCE/comments", function (d) {
    $(d).find("entry").each(function (_, entry) {
        var author = $(entry).find("author name").text(),
            comment = $(entry).find("content").text();
        html = '<div class="videoComments"><div class="inner">';

        html += '<p class="author">' + author + '</p>';
        html += '<p class="comment">' + comment + '</p>';
        html += '</div></div>';

        $('#comments').append(html);
    });
});

}

CSS

.videoComments {
margin-bottom: 20px;
}
.author {
font-size: 13px;
font-weight: bold;
color: grey;
}
.inner{ border: 1px solid red; display: inline-block; }

我在videoComments div中添加了一个额外的'内部'div，并将边框应用于此。

编辑：也许我知道如何更新小提琴：http://jsfiddle.net/8JLH7/7/

Answer 3

您可能想要修改的基本版本以满足您的需求：

在前两个var声明之后：

var border = comment.length / 10;

然后更新html输出的第一行：

html = '<div class="videoComments" style="border-width: '+border+'px">';

这将为评论中的每10个字符添加1px的边框宽度。

例如： http://jsfiddle.net/8JLH7/4/

Answer 4

您的意思是您希望元素.videoComments具有可变高度？

使用：

.videoComments {
    border: 1px solid #000;
    margin-bottom: 20px;
    min-height: 0;
    height: auto;
}

例如： http://jsfiddle.net/8JLH7/8/

根据文本调整边框大小

4 个答案: