html - 如何切断比可用空间长的文本并显示 '...' ？

Question

我有一个很长的视频标题，我想像这样在一行中显示它:

标题:TxT TxT TxT ...

但是现在是这样显示的:

标题:TxT TxT TxT TxT TxT TxT TxT TxT TxT TxT TxT TxT

这里是一个Div代码

<div class="vid-title"><%# Eval("Title")%></div>

而她是一个 css:

.vid-title {
  font-size: 20px; font-weight: bold; margin: 0px;
}

我希望文本在没有更多空间时被截断，并在末尾显示“...”。如何实现？

Answer 1

试试这个

div {
    width: 120px;
    text-overflow: ellipsis;
    white-space:nowrap;
    overflow:hidden;
    color: red;
}

JS Fiddle Demo