爲什麼這個文本打破了div標籤？如何解決它？

我只是想我證明div的寬度和高度，文字會在裏面，但我不知道爲什麼文本在這種情況下出去。爲什麼？如何解決它？爲什麼這個文本打破了div標籤？如何解決它？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Content Area Prototype 1</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
     <link rel="stylesheet" type="text/css" href="content.css" />  
    </head> 

    <body> 
     <div class="test">  zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz 
     </div> 
    </body> 
</html>

這是「content.css」

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    width: 480px; 
    height: 680px; 
    margin: 0 auto; 
    overflow: auto-scroll; 
    background-color: #212121; 
    font-family: "Segoe UI", sans-serif; 
} 

.test { 
    padding: 0.3em; 
    margin-bottom: 0.5em; 

    background-color: #fff; 
    border: 0.3em solid #59922B; 
    border-radius: 1.2em; 
}

更新：我想要的文本自動換的股利。溢出：隱藏不起作用。

更新：爲什麼不是自動換行默認？

來源

2011-09-02 Emerald214

我可以推薦'overflow：hidden' – Teneff

'overflow：hidden'會將文本截斷。除了看起來不好之外，這可能會隱藏重要信息。「自動換行」是更好的解決方案，海事組織。 –

你想要sans-serif，而不是san-serif ... – PhiLho

退房的word-wrap CSSproperty（docs）

通過添加word-wrap: break-word;到.test CSS類，文本被限制在容器：

http://jsfiddle.net/K9tmT/

來源

2011-09-02 14:24:24

這是可行的，但我不知道爲什麼word-wrap不是默認的。我認爲它包含在div中，因此它必須在邏輯上進行換行。 – Emerald214

哇，你對我來說太快了，甚至提供有用的鏈接... +1 – PhiLho

默認是'正常'。這隻會在一個自然的詞語障礙 - 即空間上打破一個詞。如果你把很長的文本放入一個容器中，那麼沒有自然的地方讓它突破 - 想一想。瀏覽器如何知道打破「zzzzz ...等」的可接受程度？這個例子是微不足道的，但對於一個長詞來說它可能是非常重要的，瀏覽器將會考慮比div更重要的文本（因爲它應該）。如果你告訴它「闖詞」，那麼即使它意味着「打破」了一個詞，你也會授予它「許可」來做任何事情來做到尊重容器大小。 –

嘗試與添加

overflow: hidden;

或

overflow: scroll;

到.TEST 和/或從移動體的高度和寬度，以.TEST

來源

2011-09-02 14:25:50

這將創建一個水平的滾動條...討厭看，很難在手機上使用。 –

'隱藏'不會創建滾動條，'滾動'會。在用例上使用哪些內容。 –

CSS overflow特性可以是使用在這種情況下

overflow: hidden;在.test

工作實施例：http://jsfiddle.net/EjFL5/

來源

2011-09-02 14:27:04

文本沒有被分解，所以你需要在css中設置word-wrap到break-word。如果您要在該文本的中間放置一個空格，那麼您會看到它將分解爲兩行代替。它跟MS Word不會跨行分離字符的原理相同

來源

2011-09-02 14:27:32

爲什麼這個文本打破了div標籤？如何解決它？

回答

相關問題