html - 截断文本的简单方法

Question

可能重复：
溢出：末尾的隐藏点

我正在编写一个简单的聊天 web 应用程序，我想截断每个参与者的名字。例如，而不是：

Miguel de Unamuno: 03:14 
    Homo sum, nihil homini alienum puto

我想：

Miguel de U...: 03:14 
    Homo sum, nihil homini alienum puto

我看到我可以用 JS 做到这一点，但似乎它应该是很常见的事情，所以我确信有一种简单的方法可以用我找不到的 HTML+CSS 做到这一点。是吗？

谢谢！

Answer 1

见演示：http: //jsfiddle.net/45Fc6/

试试这个CSS：

.ellipsis-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 80px;
}

Answer 2

您可以使用text-overflow: ellipsis截断文本：

div {
    width: 50px;

    white-space: nowrap;
    overflow: hidden;

    text-overflow: ellipsis;
}​

演示：http: //jsfiddle.net/Zn7tY/1/

Answer 3

采用ellipsis

HTML

<span>Miguel de Unamuno:</span> 03:14 
<p> Homo sum, nihil homini alienum puto</p>

CSS

span {
    border: 1px solid #000000;
    white-space: nowrap;
    width: 95px;
    overflow: hidden;
    text-overflow: ellipsis; display:inline-block
}​

演示