Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/39.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
简单的HTML/CSS定位问题_Html_Css - Fatal编程技术网

简单的HTML/CSS定位问题

简单的HTML/CSS定位问题,html,css,Html,Css,不知什么原因,我想我忘了什么。下面是我的代码: <style type="text/css"> #content { width: 400px; height: 100px; background: orange; padding: 10px; } </style> <div id="content"> <h1>what</h1> foofoofoofoofoofoofoofoofoofoofoofoof

不知什么原因,我想我忘了什么。下面是我的代码:

<style type="text/css">
#content {
    width: 400px;
    height: 100px;
    background: orange;
    padding: 10px;
}
</style>
<div id="content">
<h1>what</h1>
foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo
</div>

#内容{
宽度:400px;
高度:100px;
背景:橙色;
填充:10px;
}
什么
福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福OFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOFOF
加载时,它显示以下内容:

文本不在框内。为什么?如何修复?

添加样式

word-wrap:break-word;
在您的
#内容上

#content {
    width: 400px;
    height: 100px;
    background: orange;
    padding: 10px;
    word-wrap:break-word;
}

我不认为CSS会自动将单词分割成碎片以适应div。您可以使用
overflow:hidden
隐藏溢出。如果您有不超过div大小的单词,那么您已经使用的示例应该可以正常工作


你也可以使用
wordwrap:break-word
但是,IIRC,它需要IE或CSS3(尽管这可能代表了很多浏览器)。

非常有趣,你能试着在长字符串周围放置一个包装器吗?奇怪的是,我现在必须写它。我昨晚写了一个网站,根本没有那种风格,现在我不得不使用它?太奇怪了\这是因为文本没有空格,导致元素很长。因此,您必须强制
#内容
打断这些单词。它就像
记事本
,您可以激活和停用
自动换行