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 小提琴演示