how to hide too long texts in div elements?

Question

How can you hide the overflow in a div?

Here the text just wraps down to a new line if the text is longer than the div

<div style="width:50px; border:1px solid black; overflow-y:hidden">     test test test test </div> 

Answer 1

If you only want to show a single line of text in a fixed width div, give white-space:nowrap a go. Together with overflow:hidden it will force your browser not to break the line and crop the view to your forced width.

You might also add text-overflow:ellipsis to avoid cutting words and letters in half, it adds a nice ... to the end to show you there's some bits missing. I'm not sure about the browser support though, and I've never tried this one.

Answer 2

The CSS property text-overflow: ellipsis maybe can help you out with that problem.

Consider this HTML below:

<div id="truncateLongTexts">     test test test test </div>  #truncateLongTexts {   width: 100px;   white-space: nowrap;   overflow: hidden;   text-overflow: ellipsis // This is where the magic happens }