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

时间:2014-12-31 18:00:41

标签: html containers

我有一个HTML代码,我想存储长信息。唯一的问题是,在我的代码中,我不想在一行上有数百个句子。我宁愿看到格式如下:

 <div id ="sidebar">
            <div><b> Things to take into account: </b></div>
            <div>
            <p>
            XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
            XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
            XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
            XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
            </p>
            </div>

        </div>

然而,当我这样做并运行我的网站时,单词在他们所在的容器外面运行

你可以帮我一个方法在代码中以这种方式显示它,同时保持单词在容器内吗?

enter image description here

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

enter image description here

3 个答案:

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

http://jsfiddle.net/5deyo1tb/