Question

div中文字溢出用省略号代替，最后面加上[详情] 求解

<ul>
<li><div class="demol"><a href=""><img src="images/kehuxiao1.gif" /><span class="xiangxi" valgin=“bottom”>[ 详细 ]</span>上午刚打完四个电话，下午好像又觉得有很多话要和大勇说。电话打过去，大勇正在开会，不太方便接，婉转地说一会儿打给她。一会儿似乎很长，估计是大勇忘了，结果米米很不愉快，再锲而不舍地追了电话过去，问大勇是不是不在乎她。大勇觉得很烦。他承认米米很爱他，但是这样的爱，让大勇感觉有压力。分分秒秒想着他，表面是在乎他，但是让大勇感觉窒息。</a></div></li>
<li><div class="demol"><a><img src="images/kehuxiao1.gif" />上午刚打完四个电话，下午好像又觉得有很多话要和大勇说。电话打过去，大勇正在开会，不太方便接，婉转地说一会儿打给她。一会儿似乎很长，估计是大勇忘了，结果米米很不愉快，再锲而不舍地追了电话过去，问大勇是不是不在乎她。大勇觉得很烦。他承认米米很爱他，但是这样的爱，让大勇感觉有压力。分分秒秒想着他，表面是在乎他，但是让大勇感觉窒息。</a></div></li>
</ul>

.customercase ul{
width:235px;
height:200px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
overflow:hidden;
border:#030 dashed 1px;
}
.customercase li{
width:235px;
height:100px;
overflow:hidden;
text-overflow:ellipsis;
}
.demol{
font-size:12px;
width:235px;
margin:10px 0px 0px 0px;
line-height: 28px;
}
.demol img{
float:left;
margin:10px 10px 10px 0px;
}
.xiangxi{
color:#F00;
float:right;
margin-left:15px;
margin-right:0px;
display:inline;
}
=======





Answer 1

多行就得用js控制标签内的字符数了，判断到多少字符出现“...”
单行的就简单了，先设置div宽度，里面文字设置不换航和text-overflow: ellipsis;

a {
 width:240px;
 display:block;
 overflow: hidden;/*注意不要写在最后了*/     
 white-space: nowrap;     
 -o-text-overflow: ellipsis;     
 text-overflow: ellipsis;
}

Answer 2

使用jq追加元素

var details = "<a href='#' style='color:red;font-size:14px'>详情</a>"
$("#details").append(details);//#details是你的文本的id