On css: if text line is break show dots

Are you talking about an ellipsis? Add this to your CSS

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

Fiddle: http://jsfiddle.net/5UPRU/7/

In order for text-overflow: ellipsis to work you must also specify a width (or a max-width), white-space: nowrap and overflow: hidden

The element must be a block so make sure to use display: block or display: inline-block on inline elements.

div {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

You're looking for text-overflow: ellipsis; - you need to specify it on the <div> in addition to white-space: nowrap; and overflow: hidden;

div {
    font-family: Arial;
    background: #99DA5E;
    margin: 5px 0;
    padding: 1%;
    width: 150px;
    overflow: hidden;
    height: 17px;
    color: #252525;
    text-overflow: ellipsis;
    white-space: nowrap;
}

http://jsfiddle.net/5UPRU/4/