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 の端にわずかに重なっています。

パディングの 2 番目の 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 に答える