簡單的方法來截斷文本

可能重複：
Overflow:hidden dots at the end 簡單的方法來截斷文本

我編碼一個簡單的聊天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我無法找到。是嗎？

謝謝！

來源

2012-12-28 jesusiniesta

使用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

來源

2012-12-28 08:51:28 Sowmya

觀看演示：http://jsfiddle.net/45Fc6/

試試這個CSS：

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

來源

2012-12-28 08:50:21 phnkha

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

div { 
    width: 50px; 

    white-space: nowrap; 
    overflow: hidden; 

    text-overflow: ellipsis; 
}

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

來源

2012-12-28 08:51:16 Blender

簡單的方法來截斷文本

回答

相關問題