多行文本，垂直居中显示，文字超出高度显示省略号

标签：

最近项目中遇到多行文本，显示不全想打省略号，块状文本垂直居中显示，功能实现如下，

html:结构

<div class="questype-rate">
　　<ul class="clearfix">
　　　　<li>
　　　　　　<div class="namebox">
　　　　　　　　<div class="question-name">
　　　　　　　　　　<div class="namerow">
　　　　　　　　　　　　<div class="namecell">
　　　　　　　　　　　　　　　听力理解理解说话者的意图听力理解理解说话者的意图理解说话者的意图说话者的说话者的意图理解说话者的意图说话者的说话者的
　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　　　</div>

　　　　　　<div class="result-rate clearfix">

　　　　　　　　<span class="fl"><img src="images/icon-man.png">&nbsp;42.00%</span>

　　　　　　　　<span class="fr"><img src="images/icon-flag.png">&nbsp;53.00%</span>
　　　　　　</div>

　　　　</li>　　　　

　　　　<li>
　　　　　　<div class="namebox">
　　　　　　　　<div class="question-name">
　　　　　　　　　　<div class="namerow">
　　　　　　　　　　　　<div class="namecell">
　　　　　　　　　　　　　　　听力理解理解说话者的意图听力理解理解说话者的意图
　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　　　</div>

　　　　　　<div class="result-rate clearfix">

　　　　　　　　<span class="fl"><img src="images/icon-man.png">&nbsp;42.00%</span>

　　　　　　　　<span class="fr"><img src="images/icon-flag.png">&nbsp;53.00%</span>
　　　　　　</div>

　　　　</li>　　　　

　　　　<li>
　　　　　　<div class="namebox">
　　　　　　　　<div class="question-name">
　　　　　　　　　　<div class="namerow">
　　　　　　　　　　　　<div class="namecell">
　　　　　　　　　　　　　　　听力理解理解说话者的意图
　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　　　</div>

　　　　　　<div class="result-rate clearfix">

　　　　　　　　<span class="fl"><img src="images/icon-man.png">&nbsp;42.00%</span>

　　　　　　　　<span class="fr"><img src="images/icon-flag.png">&nbsp;53.00%</span>
　　　　　　</div>

　　　　</li>

</ul>
脚本：

<script type="text/javascript">
　　$(function(){
　　　　$(".questype-rate ul li .namebox").each(function(i){
　　　　var divH = $(this).height();
　　　　var txt = $(this).find(".namecell");
　　　　while (txt.outerHeight() > divH) {
　　　　txt.text(txt.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
　　　　};
　　});
})
</script>

css样式：

.questype-rate{margin-top: 32px;}
.questype-rate ul li{float: left; position: relative; background: #F9F9F9;border:1px solid #DEDEDE;border-radius: 5px;height: 100px;width: 116px;margin-right: 12px;margin-bottom: 12px;}
.questype-rate ul li .namebox{height: 66px;overflow: hidden;}
.questype-rate ul li .question-name{display: table;margin-top: 10px;padding:0 11px;}
.questype-rate ul li .question-name .namerow{display: table-row;}
.questype-rate ul li .question-name .namecell{display: table-cell;vertical-align: middle;font-size: 9px;height: 60px;}
.questype-rate ul li .result-rate{width:100%;position: absolute;bottom: 0;left: 0;height: 26px;line-height: 26px;background: #E8E8E8;font-size: 10px;}
.questype-rate ul li .result-rate .fl{margin-left: 5px;}
.questype-rate ul li .result-rate .fr{margin-right: 5px;}

呈现效果：

多行文本，垂直居中显示，文字超出高度显示省略号

标签：

原文地址：http://www.cnblogs.com/jinglover/p/5611851.html