Hide text if it doesn't fit in one line with CSS

Question

I have a div element which contains some text. This element has fixed width. If the text is so long that it cannot fit in one line, I want to hide that text (the wh

Answer 1

If you want to hide the extra text, you can do something like:

div {
    white-space: nowrap;
    overflow: hidden;
    max-width: 50em;
    border: 1px dotted black;
}

  this is a super long line of text that it is never ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever going to fit on a single line!

If you want to hide the entire element completely, you will need to use JavaScript. CSS has no way to "detect" if the text is too long.