CSS javascript/jquery 中块引用的添加

Question

我在 span 元素的各个段落中有几行。我的目的是提取文本并使用 jQuery 在我的 javascript 中动态添加一个 blockquote 元素。除了样式外，一切正常，我不确定为什么。

我不是为了任何花哨的东西而拍摄 - 第 above/below 行文本，缩进，增加字体大小。

当我应用边框时，它应用到每一行！而且边距只适用于第一行，而不适用于整个元素。

知道我做错了什么吗？我也尝试向 Q 元素添加一个 class，结果相同。

$(document).ready(function() {

$("span").each(function() {
    var quote = ($(this).text()); 
    quote = quote.substr(0,1).toUpperCase()+quote.substr(1); // Capitalize first letter
    quote = ("<q>"+quote+"</q>"); // add blockquote element to string
    $(this).parent().after(quote); // insert blockquote after parent of span
    $("q").css( {
    //  "border": "3px gray" ,
    //  "border-style": "ridge none",
        "font-size": "125%",
        "margin": "1em",
        "color": "red"
    });
}); // end each

}); // end ready

Answer 1

q 元素是内联元素。一旦您将显示更改为 block 或 inline-block，您的问题就会得到解决。

CSS javascript/jquery 中块引用的添加

CSS additions for blockquote in javascript/jquery

javascript

css

jquery

blockquote