div 是 HTML 中常用的元素之一，它用來創建一個包裹其他 HTML 元素的容器。然而，有時候我們在使用 div 時會遇到一個問題，就是 div 中的文本內容超出了容器的寬度，導致文字溢出的問題。這篇文章將介紹幾種解決這個問題的方法，并通過代碼示例和真實案例進行詳細解釋和說明。
，我們來看一個常見的情況，就是 div 中的文本過多導致溢出。在這種情況下，我們可以使用 CSS 的 overflow 屬性來解決。通過設置 overflow 屬性為 auto 或者 scroll，可以給 div 添加一個滾動條，讓用戶可以通過滾動查看超出容器大小的文本內容。以下是一個代碼示例：

<p>以下是一個 div 中文本溢出的例子：</p>
<pre>
<div class="container">
<p class="text">這是一段超長的文本，當 div 容器的寬度不夠時，文本就會溢出到容器外部。</p>
</div>
<br>
<style>
.container {
width: 300px;
height: 200px;
overflow: auto;
}
<br>
.text {
width: 100%;
white-space: nowrap;
}
</style>

在上面的例子中，div 容器的寬度為 300px，高度為 200px。當文本內容超過容器的寬度時，會自動出現一個水平滾動條，用戶可以通過滾動條查看完整的文本內容。
除了使用滾動條，我們還可以通過其他方式來處理 div 中文本溢出的情況。例如，可以使用 CSS 的 text-overflow 屬性來截斷文本并顯示省略號。以下是一個示例代碼：

以下是一個 div 中文本溢出并顯示省略號的例子：

<div class="container">
<p class="text">這是一段超長的文本，當 div 容器的寬度不夠時，文本就會溢出到容器外部。</p>
</div>
<br>
<style>
.container {
width: 300px;
height: 200px;
overflow: hidden;
}
<br>
.text {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>

在上面的例子中，div 容器的寬度和高度與前一個例子相同。當文本內容超過容器的寬度時，會自動截斷文本并在末尾顯示省略號。
除了使用 CSS 來處理 div 中文本溢出的情況，還可以使用 JavaScript 來動態計算和調整文本的大小和布局。以下是一個使用 JavaScript 處理 div 中文本溢出的示例代碼：

以下是一個使用 JavaScript 處理 div 中文本溢出的例子：

<div class="container">
<p id="text">這是一段超長的文本，當 div 容器的寬度不夠時，文本就會溢出到容器外部。</p>
</div>
<br>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
adjustTextSize();
});
<br>
function adjustTextSize() {
const container = document.querySelector('.container');
const textElement = document.getElementById('text');
const containerWidth = container.offsetWidth;
const textWidth = textElement.offsetWidth;
const scaleFactor = containerWidth / textWidth;
const fontSize = Math.floor(parseFloat(getComputedStyle(textElement).fontSize) * scaleFactor);
textElement.style.fontSize =${fontSize}px`;
}
</script>
<br>
<style>
.container {
width: 300px;
height: 200px;
overflow: hidden;
}
<br>
.text {
width: 100%;
white-space: nowrap;
overflow: hidden;
}
</style>

在上面的例子中，當頁面加載完成時，JavaScript 會自動調用 adjustTextSize() 函數來根據 div 容器的寬度和文本內容的寬度計算一個合適的字體大小，并將字體大小應用到文本元素上。
綜上所述，當 div 中的文本內容超出容器的寬度時，我們可以使用 CSS 的 overflow 屬性添加滾動條，使用 text-overflow 屬性截斷文本并顯示省略號，或者使用 JavaScript 動態計算和調整文本的大小和布局。通過這些方法，我們可以有效地處理 div 字數超出的問題，提升頁面的用戶體驗。
參考：
- "How to deal with a long unbreakable string inside a container div?" (https://stackoverflow.com/questions/1448562/) - "Ellipsis text overflow not working within a div?" (https://stackoverflow.com/questions/34502702/)