Handle text as elements, how to hide with CSS?

Question

I have a div with content like this:

<div class="myDiv">
Here's some text that vary in length <span class="separator">/</span> Some other text <_other elements etc>
</div>

What I want is, only using CSS, to display the first text and hide the rest.

I have tried .myDiv *:not(:first-child) { display: none; } which hides all elements, except the first separator. All texts are still visible.

Is this even possible, only using CSS?

Edit: the text is in variable lenght, but this variation is restricted between 14 and 21 chars. It will never be line breaked. (Added this info for solutions like set the div to a width and visibility:hidden or solutions like that which is fully acceptable)

Answer 1

This is how I would do it:

<div class="myDiv"><span>Here's some text that vary in length</span>  <span class="separator">/<span><span> Some other text </span><span><_other elements etc></span>
</div>

.myDiv > span:not(:first-child) {
    display:none;
}

Here is the JSFiddle demo

Separate your text using span properly and then apply the css to hide the spans if its not the first-child