<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="https://img.php.cn/upload/article/000/023/547/f1dc2ddda91d6538cb732dbe9cf6797a-0.png" 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:css;toolbar:false;" style="white-space: nowrap; overflow-wrap: break-word; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: "Source Code Pro",monospace; padding: 5px 5px 5px 60px; font-size: 14px; line-height: 1.45; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.05); border: 0px solid rgb(136, 136, 136); border-radius: 0px;"> overflow: hidden;//多余的隐藏 text-overflow:ellipsis;//多出来的用省略号代替 white-space: nowrap;//不换行</pre><div class="contentsignin">登录后复制</div></div>
