你是在说省略号吗？把它添加到你的CSS中

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

字符串
小提琴：http://jsfiddle.net/5UPRU/7/

为了使text-overflow: ellipsis工作，还必须指定width（或max-width）、white-space: nowrap和overflow: hidden
元素必须是一个块，所以确保在内联元素上使用display: block或display: inline-block。

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

字符串

您正在查找text-overflow: ellipsis;-除了white-space: nowrap;和overflow: hidden;之外，还需要在<div>上指定它

div {
    font-family: Arial;
    background: #99DA5E;
    margin: 5px 0;
    padding: 1%;
    width: 150px;
    overflow: hidden;
    height: 17px;
    color: #252525;
    text-overflow: ellipsis;
    white-space: nowrap;
}

字符串
http://jsfiddle.net/5UPRU/4/

你可以在css文件中使用text-overflow: ellipsis;。例如：

div {
font-family: Arial;
background: #99DA5E;
margin: 5px 0;
padding: 1%;
width: 150px;
overflow: hidden;
height: 17px;
color: #252525;
}
span {
float: left;
font-family: Arial;
background: #FAFA41;
margin: 5px 0;
padding: 1%;
width: 150px;
overflow: hidden;
height: 17px;
color: #505050;
}

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

个字符

.ellipsis-container {
  width: 173px;
  overflow: hidden;
  white-space: nowrap;
  text-align: left !important;
  display: block;
}

.ellipsis-container span {
   display: inline-block;
   width: 100%;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
}

<div class="ellipsis-container">
    <span>Your text goes here</span>
</div>

字符串