7

我在包含 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 设置的宽度有关吗？

4

3 回答 3

11

这会将您的文本包装在 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 */ 
}
于 2012-10-08T07:28:31.313 回答
2

我明白你的意思，最后的 K 与 Chrome 中 div 的边缘略微重叠。

我建议删除您的填充中的第二个 5px 并且只需：

padding:  5px;

还添加：

word-wrap:break-word;

这样你就可以在整个 div 周围获得 5px 的填充，并且你的内容将被包装。

于 2012-10-08T07:29:35.667 回答
1

问题是你有一个很长的词。您可以按照他们所说的使用word-wrap: break-word;，也可以隐藏文本。

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

p {
  text-overflow: ellipsis;
}

在哪里：

text-overflow: clip|ellipsis|string;

更多信息

于 2012-10-08T07:33:46.247 回答