HTML 文本選取超出 div 範圍：如何限制藍色選取區塊在容器內？

問題說明

當在 div 內選取一段文字時，藍色的選取背景有時會超出 div 的邊界，這通常是因為區塊級元素（如 <p>）預設寬度會撐滿父容器，且選取行為受區塊佈局影響。

解決方法

將段落設定為 display: inline-block;，讓其寬度隨內容縮減，選取範圍就不容易超出 div。

<style>
#article {
    width: 500px;
    min-height: 400px;
    margin: 10px auto;
    border: 1px solid #ccc;
}
p {
    display: inline-block;
}
</style>

<div id="article">
  <p>床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉。</p>
</div>

原理

• display: block 預設佔滿整行寬度，選取時可能延伸至容器邊緣。
• display: inline-block 讓元素只佔用內容所需寬度，選取區塊會緊貼文字。