テキストオーバーフロー：省略記号が機能していません

text-overflow: ellipsisを動作させることができません。見つからない間違いを見つけられることを願っています。ここに私のコードは次のとおりです。テキストオーバーフロー：省略記号が機能していません

HTML：

<div class="out"> 
    <div class="in1"></div> 
    <div class="in2">some long random text which should not fit in here</div> 
</div>

CSS：

* { 
    box-sizing: border-box; 
} 

.out { 
    display: block; 
    height: 60px; 
    width: 250px; 
    border-bottom: 1px solid #eee; 
    cursor: pointer; 
    color: #000; 
    background: lightgreen; 
} 

.in1 { 
    height: 60px; 
    width: 60px; 
    padding: 10px; 
    float: left; 
    border: 1px solid red; 
} 

.in2 { 
    float: left; 
    height: 60px; 
    line-height: 60px; 
    width: 190px; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    font-size: 1.1em; 
    border: 1px solid blue; 
}

JSFiddle：http://jsfiddle.net/59m5e6ex/

私はthisを見つけましたが、私の知る限り、私のdivは、すべて満たしています要件。

出典

2017-05-04 vsakos

ジャストホワイトスペースを追加：NOWRAP：あなたの.in2クラス – StefanBob

に '空白を追加します。NOWRAPを;'神ああ – Rennie

省略記号のテキストオーバーフローの要素にwhite-space: nowrapを追加する必要があります。それ以外の場合、テキストは毎回新しい行に折り返され、テキストオーバーフローは検出されません。ここで

が作業フィドルがある：http://jsfiddle.net/59m5e6ex/2/

だから、あなたはtext-overflow: ellipsis;を実行するには、少なくとも3つのプロパティが必要です。あなたが必要なプロパティのいずれかを使用できない場合

element { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
}

をまた、ここですることができますjavascriptのですテキストの最後に「3ドット」を追加するために使用します。

/** 
* @param text   string  - text to shorten 
* @param maxTextLength int   - desired max length of shorten string 
* @return ret   string  - new shortened string 
*/ 
function shorten(text, maxTextLength) { 
    var ret = text; 
    if (ret.length > maxTextLength) { 
     ret = ret.substr(0,maxTextLength-3) + "..."; 
    } 
    return ret; 
}

指定された最大長の新しい文字列を返します。もちろんそれは価値が変わるでしょう。このトピックのより多くのあなたは、他のテキストが新しい行に折り返され、あなたのin2クラスで