how to hide too long texts in div elements?

Maybe the CSS property text-overflow: ellipsis can help you out with that problem.

Consider this HTML and CSS 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. */
}