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