text-overflow:ellipsis;

HTML

<header>
    <h1>Long text is so long oh my is long indeed</h1>
</header>

CSS

header {
    border:1px solid red;
    width:150px;
    position:relative;
}
h1 {
   overflow:hidden;
    white-space:nowrap;
   /* -ms-text-overflow:ellipsis; */
    /* text-overflow:ellipsis; */
    width:150px;
    height:1.2em;
}
header:after{
    content:"...";
    position:absolute;
    top:0;
    right:0;
    background:#fff;
}
h1:hover {
    overflow:visible;
}