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

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：

.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

检查css中的scrollon类。通过使用类

来增加该特定的大小

Answer 2

你可以试试这个：

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

以下是一个示例：http://codepen.io/anon/pen/OXdLwO

Answer 3

尝试使用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;
}