テキストを短くする必要があります（テキストオーバーフローの問題：省略記号）

Question

プロパティtext-overflow：ellipsisに問題があります。私が読んできたように、あなたはdisplay table-cellでそれを使うことはできませんが、私はチーム名のテーブルセルをたくさん持っていて、その中のいくつかは本当に大きく、いくつかの解決策では適合しません。

名前が大きいがいくつかの小さな単語がある場合は問題はありませんが、問題は1つの大きな単語（約15文字）がある場合です。私は「...」と言葉を短くしたり、絵に何が起きているのかを突き止める必要があります。

CSS、Jquery、またはjavascriptを使ってどのような提案やヒントを行うのですか？

ありがとうございます！

PD：名前の横にも数字が表示されます。

HTML：

<div class="betHandle team2"> 
<i class="logo"></i> 
<span class="name"> 
    <i> 
    <em>4.50</em> 
    </i> 

    <b>FC CHAYKA PESCHANOKOPSKOYE</b> 
</span> 
    </div> 

CSS：CSSで

.name{ 
line-height: 3.28em; 
display: table; 
} 

b{ 
font-weight: 300; 
display: table-cell; 
line-height: 1em; 
vertical-align: middle; 
padding-right: 1em; 
width: 100%; 
} 

Answer 1

てみdiv代わりbを使用してdivの

<div class="betHandle team2"> 
     <i class="logo"></i> 
     <div class="name"> 
      <div class="divId">4.50</div> <div class="divId">FC CHAYKA PESCHANOKOPSKOYE</div> 
     </div> 
    </div> 

を設定します。ここでは

width: 200px; /* choose the width you want */ 
overflow: hidden; 
text-overflow: ellipsis; 

は一例です

およびスタイル：

.name{ 
    font-weight: 300; 
    overflow: hidden; 

} 
.name div{ 
    display:inline-block; 
} 

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

Answer 2

チェックscrollonクラス。クラス

Answer 3

を使用することにより、その特定のサイズを増やすあなたはこれを試みることができる：http://codepen.io/anon/pen/OXdLwO

Answer 4

.name{ 
line-height: 3.28em; 
display: table; 
} 

b{ 
font-weight: 300; 
display: table-cell; 
line-height: 1em; 
vertical-align: middle; 
overflow:hidden; 
text-overflow: ellipsis; 
padding-right: 1em; 
width: 100%; 
}