<p style='margin-top:0px; margin-bottom:1.1em; padding-top:0px; padding-bottom:0px; font-family:"microsoft yahei"; font-size:15px'><span style="color:rgb(63,63,63)">在前端经常会遇到类似的效果。 比如图中的“风花雪月与古镇火山-</span><span style="color:#ff0000"><strong>.....</strong></span><span style="color:#3f3f3f">”后面“....”<span style='color:rgb(63,63,63); font-family:"microsoft yahei"; font-size:15px'>就是一段文字显示不下的时候默认隐藏然后用…来代替。</span></span><br><span style="color:#3f3f3f"><span style="border-width:initial; border-color:initial; height:auto"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/023/547/f1dc2ddda91d6538cb732dbe9cf6797a-0.png" class="lazy" alt="这里写图片描述" title=""></span> </span><span style="max-width:90%"> </span><br><span style="color:#3f3f3f">只需要给元素加上以下3个css属性就可以实现了。</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> overflow: hidden;//多余的隐藏 text-overflow:ellipsis;//多出来的用省略号代替 white-space: nowrap;//不换行</pre><div class="contentsignin">登录后复制</div></div>