Handle text as elements, how to hide with CSS? - html

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

Answer 2

It is not possible to directly select text nodes using CSS so the logical way of achieving this would be to wrap the text in an element and hide that. Unfortunately, this is not an option in this instance as the HTML markup cannot be modified and JavaScript cannot be used.
Luckily, we can rely on two things:
The text will always be on one line
The .separator element will exist
We can therefore use a combination of overflow on .myDiv and a pseudo element in .separator to forcibly hide the unwanted text:
Add height: 1em; and line-height: 1em; to .myDiv to force it only to show one line of text
Add overflow: hidden; to .mDiv to ensure that the overflown content is hidden
Create an :after pseudo element in .separator and set it to display: block; to ensure that it is forced onto a new line. This will ensure that the separator itself (/) is still shown
.myDiv {
height: 1em;
line-height: 1em;
overflow: hidden;
}
.separator:after {
content:"";
display: block;
}
<div class="myDiv">Here's some text that vary in length <span class="separator">/</span> Some other text
<_other elements etc>
</div>
If the separator is not required the CSS can be simplified. The pseudo element can be removed and .separator itself can be set to display: block; to force it onto a new line.
.myDiv {
height: 1em;
line-height: 1em;
overflow: hidden;
}
.separator {
display: block;
}
<div class="myDiv">Here's some text that vary in length <span class="separator">/</span> Some other text
<_other elements etc>
</div>

Answer 3

Edited You can Use this also
.myDiv{
max-width: 28.5ch;
overflow: hidden;
white-space: nowrap;
}
OR
<style>
.myDiv *:first-child
{
display:none;
}
</style>
<div class="myDiv">Here's some text that vary in length <span class="separator"> Some other text <_other elements etc></span>