El bloque en línea de Multiline se convierte en un bloque y arruina mi efecto de cita ingeniosa

Question

Estoy tratando de crear una comilla de bloque que tenga enormes comillas en sus lados. El contenido de texto de la cita del bloque es dinámico, por lo que las marcas deben alinearse de acuerdo con su tamaño.

He utilizado un elemento de bloque en línea para que se contraiga y contenga su texto, y estoy 90% allí, pero mi único problema es que un elemento de bloque en línea se convierte en un elemento de bloque cuando tiene múltiples líneas.

Para ilustrar por qué esto es un problema, he hecho fragmento jsFiddle:

http://jsfiddle.net/kTQqC/1/

Como se puede ver, la mayoría de los bloques ve bien:

1. una sola línea - sin problema. La marca de cierre se adjunta a la última palabra .
2. Múltiples líneas - El blockquote toma ancho de disponible completo. Aún así, no hay mucho problema.
3. Igual que 2, palabras más cortas.
4. Aquí es donde se vuelve complicado. Como el elemento de bloque en línea se convierte en un elemento de bloque, toma el ancho total disponible y arruina el efecto al colocar la marca de cierre muy lejos.

no tengo control de la longitud del contenido de las palabras. Algunas veces el ejemplo 4 ocurrirá.

¿Alguien tiene una idea de cómo solucionar esto? También estoy dispuesto a descartar todo este código si tiene un enfoque completamente diferente para obtener el mismo efecto.

Gracias!

Answer 1

Si usted está dispuesto a usar un poco de secuencias de comandos, se puede hacer lo siguiente:

poner el texto en un span con una clase, al igual que ...

<span class="words">1. Hello</span> 

continuación, obtener la width de cada span y dinámicamente ajustar el max-width

$('span.words').each(function(){ 
    var a = $(this).width(); 
    $(this).parent().css('max-width', a + 'px'); 
}); 

http://jsfiddle.net/jasongennaro/kTQqC/15/

Answer 2

Ordenada: http://jsfiddle.net/kTQqC/14/

se mostrará automáticamente en línea Un elemento span, por lo que su cotización de cierre debe haber sido automáticamente justo al lado de su última palabra. Tomé su posición relativa de su elemento blockquote y el elemento quote. Esto dejó los tramos un poco más arriba de las primeras/últimas palabras (como demasiado altas), así que las empujé hacia abajo usando un posicionamiento relativo en ellas individualmente, 10px para la apertura, dejándola justo encima de la primera palabra, y 18px para el Cita de cierre dejándola colgando debajo de la última palabra. Así es como son cuando los ves en revistas.