Question

我在包含div中的文字从它应该实际自动包装的两侧溢出。

HTML

<!DOCTYPE HTML>

<html>

<head>

    <title>
        Welcome to my site
    </title>

    <link rel=stylesheet type="text/css" href=global.css>   

</head>

<body>

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

</body>

</html>

这就是css

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;
}

以下是显示内容：

Screenshot

我已经阅读了其他问题，但没有一个能解决我的问题。问题是文本没有溢出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;

More info

Answer 3

我可以看到你的意思，最后的K稍微重叠了Chrome中div的边缘。

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

padding:  5px;

同时加入：

word-wrap:break-word;

通过这种方式，您可以在整个div周围获得5px填充，并且您的内容将被包装。

文本溢出其容器div的两侧

3 个答案: