根據文本改變邊框

Question

我有一段Jquery，它從youtube中提取評論並將它們發佈到頁面上，但是，就目前而言，評論周圍的邊界是標準大小。如果可能的話，我希望能通過某種方式來擴展評論區域中的文本數量。

Fiddle

當前CSS：

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

Answer 1

我不知道如何更新小提琴，但在這裏您需要的代碼：

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則應用於邊境到。

編輯：也許我知道如何更新一個小提琴：http://jsfiddle.net/8JLH7/7/

Answer 2

只是一個基本的版本，您可能需要修改，以適應您的需求：

前兩個var聲明後：

var border = comment.length/10; 

然後，更新的HTML輸出的第一行：

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

這將爲每個評論提供一個額外的邊框寬度，每個10個字符在評論中。

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

Answer 3

你的意思是你想要的元素.videoComments具有可變的高度？

用途：

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

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

Answer 4

爲什麼不去做這樣的嗎？

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

加入

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