在<li>标签中，想要实现文字超出就隐藏，CSS怎么写？

Posted 2023-04-09

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：liwidth: 100px; white-space: nowrap;overflow: hidden;。

3、浏览器运行index.html页面，此时<li>标签中超出的文字被隐藏了。

参考技术A <li>超出部分自动隐藏
white-space:nowrap;
overflow: hidden;

<li>超出部分自动隐藏并用省略号代替
white-space:nowrap;
overflow: hidden;
text-overflow:ellipsis; 省略号 参考技术B 一个原则，高度固定，加overflow:hidden;就隐藏了 参考技术C style="overflow:hidden;" 参考技术D overflow:hidden

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

 

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

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

呈现效果：