需要缩短文本（有文本溢出的问题：省略号）

Question

我遇到属性文本溢出问题：省略号。正如我一直在阅读，你不能用于显示表格单元格，但我有许多表格单元格与团队名称，其中一些非常大，并在某些决议它不适合（见下面的图片）。

如果名字很大但有几个小字没有问题，问题是有一个大字（约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> 

和款式：

.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

增加特定的大小你可以试试这个：

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

下面是一个例子：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%; 
}