如何不顯示div元素之外的鏈接？

Question

HTML代碼：

<p>texts and a link: <a href="https://www.apple.com/aaaaaaaaaaaaaaaaaaaaaaaaa">https://www.apple.com/aaaaaaaaaaaaaaaaaaaaaaaaa</a> 

CSS代碼：

p { 
    width: 100px; 
    height: 600px; 
    background: red; 
} 

見這裏的代碼演示：http://jsfiddle.net/9j4pT

從代碼演示，可以看到該鏈接會顯示紅色的段落元素之外。我希望鏈接可以顯示在紅色段落元素裏面。有解決方案嗎？ HTML5是否有解決方案？謝謝。

Answer 1

首先要與</p>

關閉p標籤然後你想自動換行：

p { 
    width: 100px; 
    height: 600px; 
    background: red; 
    word-wrap: break-word 
} 

Answer 2

您還可以設置溢出爲隱藏。

p { 
    width: 100px; 
    height: 600px; 
    background: red; 
    overflow:hidden; 
} 

Answer 3

取決於您期待的結果。

如果你想p寬度將保持不變，使用：如果你想寬度將保持不變，使用

p { 
    word-wrap: break-word; 
} 

：

p { 
    /*remove width: 100px;*/ 
    display: inline-block; 
}