文本溢出其容器div的两侧

Question

My text inside the containing div overflows it from the sides where it should be actually wrapping automatically. 我在包含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>

And here is what is displayed: 以下是显示的内容：

I have read other questions but none of them solves my issue. 我读过其他问题但没有一个能解决我的问题。 The thing is that the text does not overflow the bottom of the div. 问题是文本没有溢出div的底部。 Is it something to do with the width I have set for the div? 这与我为div设置的宽度有关吗？

Answer 1

This will wrap your text within the div, even if your string is unbroken (which is what I assume you mean). 这将把你的文本包装在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

The problem is that you have a very long word. 问题是你有一个很长的词。 You can do as they said, with word-wrap: break-word; 你可以像他们说的那样，用word-wrap: break-word; , or you can hide the text. ，或者你可以隐藏文字。

You can use text-overflow, ie: 您可以使用文本溢出，即：

p {
  text-overflow: ellipsis;
}

Where: 哪里：

text-overflow: clip|ellipsis|string;

More info 更多信息

Answer 3

I can see what you mean, the final K slightly overlaps the edge of the div in Chrome. 我可以看到你的意思，最后的K略微重叠了Chrome中div的边缘。

I would suggest removing the second 5px in your padding and just have: 我建议删除你的填充中的第二个5px，只需：

padding:  5px;

Also add in : 还加入：

word-wrap:break-word;

That way you get 5px padding around the entire div and your content will be wrapped. 这样你就可以在整个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