Loco elemento: block para su precedente, inline para lo siguiente 4.6.15
Cómo hacer cn Css que un elemento "inline" se comporte como de bloque para lo que le precede y así pase a la línea siguiente y mantenga su naturaleza de "en línea" para lo que le sigue (se posicione en su mismo renglón). Sin usar br, claro.
Loco elemento: block para su precedente, inline para lo siguiente
Pongámonos en situación: tienes una serie de elementos inline
dentro de otro de bloque, como acrónimos abbr
dentro de un párrafo. Elementos que aparecerán aleatoriamente. Y deseas que cada vez que aparezca uno de ellos pase a la línea siguiente (que cree un salto de línea antes de él). Y a la vez todo lo que le siga esté en su línea.
Dicho de otra forma: que se comporte como elemento de bloque para lo que le precede y de línea para lo que le sigue.
Quizás no sea una situación muy corriente. Quién sabe. Pero por si acaso lo necesitas, aquí va la solución. Simple y sencilla.
See the Pen acronym-limit-lines by Kseso (@Kseso) on CodePen.
Te prometí sencillez y como puedes ver lo cumple. Todo se reduce a hacer que se manifieste el pseudoelemento ::before
del elemento en línea que nos interese (en nuestro supuesto el acrónimo):
abbr::before {
content: '';
display: block;
}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Quiero reunir "inline" una serie de links al final del post en mi blog, en una caja con background, etc.
ResponderEliminar.blokcuote { background: #...; display: inline; widht: 100px; }
Pero no da resultados, mi pregunta es ¿Porqué. Está mal escrito el css?
Hola Antoni
EliminarLa propiedad width no está permitida en elementos inline (excepto en los reemplazados como imágenes o iframes).
Por lo tanto, por mucho que la declares vía Css será ignorada y la anchura de tus .blokcuote será la que fuerce su contenido.
Por cierto y a título informativo y complementario, .blokcuote como nombre de selector por clase será correcto si ese es el valor del atributo class. Pero el nombre del elemento html es blockquote
Un saludo