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;
}
=======

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

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

温馨提示:内容为网友见解,仅供参考
第1个回答  2018-09-18
使用jq追加元素

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