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>View:
Span-1 content goes here.. | Span-2 content goes here..
This works fine, when the 1st span tag's content is less, But when the content increases need a line break like and have to hide the separator (i,e | ).
Span-1 more and more content goes here..
Span-2 content goes..
What's the better way to achieve this ??
Couldn't you do this via using a display: none/block media query on a br element?
.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>