文本溢出其容器div的兩側

Question

我在包含div中的文本從它應該實際自動包裝的兩側溢出。

 html { padding: 0; margin: 0; } body { background: #E4E4E4; height: 100%; width: 100%; } #main { display: block; background: white; width: 960px; margin: 0 auto; position: relative; padding: 5px 5px; }

 <body> <div id="main"> <p>jjfaljfejjfkadjf;lj;jmvwutpvwjfjdsjfklsdkdfjklsjfkljwjeiojfklslfkjsvfoiwjeorfjviw nfwvfjojwkdsklflskjfvwiernvejveurvnwejfkdsjwjjrfjiowjeionvkjlksjdfkljkljdwijiodjfiovnwjoiejoijfiojkjsljfdkjslfiejskdklfjlksjfeijskdjfklsjkldjfwjnfklsjfwoevjnwfdjshfk fsdkjfsjdfkjksjdfkjsljfdkljskl </p> </div> </body> </html>

以下是顯示的內容：

我讀過其他問題但沒有一個能解決我的問題。 問題是文本沒有溢出div的底部。 這與我為div設置的寬度有關嗎？

Answer 1

這將把你的文本包裝在div中，即使你的字符串是不間斷的（這就是我所說的）。

.wordwrap {  
   white-space: pre-wrap;      /* Webkit */    
   white-space: -moz-pre-wrap; /* Firefox */     
   white-space: -pre-wrap;     /* Opera <7 */    
   white-space: -o-pre-wrap;   /* Opera 7 */     
   word-wrap: break-word;      /* IE */ 
}

Answer 2

問題是你有一個很長的詞。 你可以像他們說的那樣，用word-wrap: break-word; ，或者你可以隱藏文字。

您可以使用文本溢出，即：

p {
  text-overflow: ellipsis;
}

哪里：

text-overflow: clip|ellipsis|string;

更多信息

Answer 3

我可以看到你的意思，最后的K略微重疊了Chrome中div的邊緣。

我建議刪除你的填充中的第二個5px，只需：

padding:  5px;

還加入：

word-wrap:break-word;

這樣你就可以在整個div周圍獲得5px填充，並且你的內容將被包裝。

文本溢出其容器div的兩側

問題描述

3 個解決方案

解決方案1
8 已采納 2012-10-08 07:28:31

解決方案2
1

解決方案3
0

文本溢出其容器div的兩側

問題描述

3 個解決方案

解決方案1 8 已采納 2012-10-08 07:28:31

解決方案2 1

解決方案3 0

解決方案1
8 已采納 2012-10-08 07:28:31

解決方案2
1

解決方案3
0