CSS-Zusätze für blockquote in Javascript/jquery

Question

Ich habe ein paar Zeilen in verschiedenen Absätzen innerhalb der Span-Elemente. Meine Absicht ist, den Text zu ziehen und dynamisch ein Blockquote-Element in meinem Javascript mit jQuery hinzuzufügen. Alles funktioniert wie es sollte, außer für das Styling, und ich bin mir nicht sicher warum.

Ich feuere nicht für etwas Phantasie - Linie über/unter dem Text, Einzug, erhöhen Sie die Schriftgröße.

Wenn ich die Grenze anwenden, gilt es für jede Zeile! Und der Rand gilt nur für die erste Zeile, nicht das gesamte Element.

Irgendeine Idee, was ich hier falsch mache? Ich habe versucht, dem Q-Element eine Klasse hinzuzufügen, die gleichen Ergebnisse.

$(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 Das Element ist ein Inline-Element. Sobald Sie die Anzeige auf block oder inline-block ändern, wird Ihr Problem behoben.