我有一个HTML代码,我想存储长信息。唯一的问题是,在我的代码中,我不想在一行上有数百个句子。我宁愿看到格式如下:
<div id ="sidebar">
<div><b> Things to take into account: </b></div>
<div>
<p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</p>
</div>
</div>
然而,当我这样做并运行我的网站时,单词在他们所在的容器外面运行
你可以帮我一个方法在代码中以这种方式显示它,同时保持单词在容器内吗?
我的css:
#sidebar {
"background-color: #eee;
height: 200px;
width:350px;
float:left;
margin-top: 30px;
margin-left: 30px;
border: 1px solid black;
border-radius: 5px;
display: block;
}
更新:将X更改为单词并修复它。很奇怪,但好吧哈哈
答案 0 :(得分:2)
您的问题是xxxxxxxxxxxxxx被认为是一个单词,默认情况下浏览器不会破坏这个单词。
添加
word-wrap:break-word;
会解决这个问题,但是我猜想一旦你在那里使用实际文本,它会更自然地破解,因为它不会是这么多字符的单个单词。
小提琴:http://jsfiddle.net/ktbypbtt/
这是另一个没有自动换行的小提琴,但带有实际文字。 http://jsfiddle.net/ktbypbtt/1/
注意它是如何打破自己的,因为浏览器会自然地将每个单词后面的单词包装在div的末尾,但需要特别告知要打破单词。
答案 1 :(得分:0)
只需添加<br>
标记,即可将文字转到下一行
<div id ="sidebar">
<div><b> Things to take into ACCOUNT: </b></div>
<div>
<p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
</p>
</div>
</div>
有用吗?让我知道:)
答案 2 :(得分:0)
添加一些CSS。
#sidebar{
display: block;
}
或者在包装div中添加一个类,并将display设置为block
<强>编辑强> 你可以切断溢出:
#sidebar{
overflow: hidden;
}