固定：HTML格式的段落让它赏心悦目

Question

我有一个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更改为单词并修复它。很奇怪，但好吧哈哈

Answer 1

您的问题是xxxxxxxxxxxxxx被认为是一个单词，默认情况下浏览器不会破坏这个单词。

添加

word-wrap:break-word;

会解决这个问题，但是我猜想一旦你在那里使用实际文本，它会更自然地破解，因为它不会是这么多字符的单个单词。

小提琴：http://jsfiddle.net/ktbypbtt/

这是另一个没有自动换行的小提琴，但带有实际文字。 http://jsfiddle.net/ktbypbtt/1/

注意它是如何打破自己的，因为浏览器会自然地将每个单词后面的单词包装在div的末尾，但需要特别告知要打破单词。

Answer 2

只需添加<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>

有用吗？让我知道:)

Answer 3

添加一些CSS。

#sidebar{
  display: block;
}

或者在包装div中添加一个类，并将display设置为block

<强>编辑 你可以切断溢出：

#sidebar{
    overflow: hidden;
}

http://jsfiddle.net/5deyo1tb/