Question

可能重复：
Overflow:hidden dots at the end

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

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
}

<强> DEMO

截断文本的简单方法

3 个答案: