p { width: 350px; } <p> <span class="c-1">Span-1 content goes here..</span> | <span class="c-2">Span-2 content goes here..</span> </p>Vista:
El contenido de Span-1 va aquí.. | El contenido de Span-2 va aquí..
Esto funciona bien, cuando el contenido de la etiqueta 1st span es menor, pero cuando el contenido aumenta, necesita un salto de línea y tiene que ocultar el separador (es decir, e |).
Span-1 más y más contenido va aquí..
El contenido de Span-2 va...
¿Cuál es la mejor manera de lograr esto?
¿No podría hacer esto usando una pantalla: ninguno/bloquear consulta de medios en un elemento br?
.br { display: none; } @media screen and (min-width: 768px) { .br{ display: block; } } <p> <span>Yo this is a</span> <br class="br"> <span>full sentence</span> </p>