0

重複の可能性:
オーバーフロー: 最後に隠れたドット

私は単純なチャット 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でこれを行う簡単な方法があると確信しています。それは...ですか？

ありがとう！

4

3 に答える 3

3

デモを参照してください: http://jsfiddle.net/45Fc6/

このCSSを試してください：

.ellipsis-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 80px;
}
于 2012-12-28T08:50:21.283 に答える
1

text-overflow: ellipsisテキストを切り捨てるために使用できます：

div {
    width: 50px;

    white-space: nowrap;
    overflow: hidden;

    text-overflow: ellipsis;
}​

デモ: http://jsfiddle.net/Zn7tY/1/

于 2012-12-28T08:51:16.490 に答える
1

使用する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
}​

デモ

于 2012-12-28T08:51:28.027 に答える