多行文本，垂直居中显示，文字超出高度显示省略号
Posted 小菲儿love
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了多行文本，垂直居中显示，文字超出高度显示省略号相关的知识，希望对你有一定的参考价值。
最近项目中遇到多行文本，显示不全想打省略号，块状文本垂直居中显示，功能实现如下，
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"> 42.00%</span>
<span class="fr"><img src="images/icon-flag.png"> 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"> 42.00%</span>
<span class="fr"><img src="images/icon-flag.png"> 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"> 42.00%</span>
<span class="fr"><img src="images/icon-flag.png"> 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;}
呈现效果：
以上是关于多行文本，垂直居中显示，文字超出高度显示省略号的主要内容，如果未能解决你的问题，请参考以下文章