<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)">프런트 엔드에서도 유사한 효과가 자주 발생합니다. 예를 들어 그림에서 "Fenghuaxueyue and Ancient Town Volcano-</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> 이를 달성하려면 요소에 다음 3가지 CSS 속성을 추가하기만 하면 됩니다. <span style="color:#3f3f3f"></span><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></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
