[javascript] 隱藏span裡太長的文字

在網頁中隱藏過長的文字，可以用 CSS 的 overflow、white-space 和 text-overflow 屬性來實現。

範例程式碼

HTML

<div class="text-container">
    <span class="text">這是一段非常長的文字，可能會超出容器的寬度，因此我們需要將其截斷並隱藏。</span>
</div>

CSS

.text-container {
    width: 200px; /* 設定容器的寬度 */
    white-space: nowrap; /* 禁止換行 */
    overflow: hidden; /* 隱藏超出的部分 */
    text-overflow: ellipsis; /* 使用省略號表示截斷 */
    border: 1px solid #ccc; /* 選擇性：添加邊框方便查看效果 */
    padding: 5px; /* 選擇性：增加一些內邊距 */
    box-sizing: border-box; /* 確保padding不影響寬度 */
}

說明

white-space: nowrap;：禁止文字在容器內換行，確保整行文字在同一行顯示。
overflow: hidden;：隱藏超出容器範圍的內容。
text-overflow: ellipsis;：當文本超出容器寬度時，用省略號 (...) 表示。

這段CSS會讓中的文本在超出指定寬度時被截斷並顯示省略號。

進階選項

如果需要讓文字在某些情況下（例如懸停時）顯示完整，可以使用JavaScript或CSS來改變white-space或overflow的屬性。

CSS懸停顯示完整文字

.text-container:hover {
    white-space: normal; /* 允許文字換行 */
    overflow: visible; /* 顯示超出的內容 */
}

這樣，當使用者將滑鼠懸停在文字上時，完整的文本就會顯示出來。