@keyframes youranimetion
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

.test {
width: 300px;
height: 1.4em;
text-overflow: ellipsis; /* Safari 用 */
-o-text-overflow: ellipsis; /* Opera 用 */
overflow: hidden;
white-space: nowrap; /* 文字不折行功能。一定要寫入，否則不會出現效果 */
border: 1px solid #666666;
}
.test:hover {
text-overflow: inherit; /* Safari 用 */
-o-text-overflow: inherit; /* Opera 用 */
overflow: visible;
}

<div class="test"> 如果你要呈現過長的文章，請用滑鼠確認一下喔 </div>