css - 在具有 "white-space: pre;"的固定宽度 div 中包含文本

Question

如果标题有点模糊，请允许我解释。

我正在使用 NodeJS、MongoDB 和 Express 制作一个小型问答应用。

目前我正在使用 CSS 进行布局部分。

我有一个小文本区域，您可以在其中提交文本，单击提交按钮后，您将被重定向到一个显示您刚刚通过表单输入的数据的页面。

但是，文本的主体超出了我为div设置的最大宽度，这是在我添加了“white-space: pre;”之后发生的。属性以在帖子中启用换行符。在此之前，文本将保持在我为 div 定义的 960px 宽度内，但不会有任何换行符。

此 View 的 Jade 代码:

extends layout

block content
    div.pageContainer
        h1 #{discussion.title}
        span(id="categoryMarker" style="font-size: 1.25em;") "#{discussion.category}"

        h3 #{discussion.author}
            |  -  
            span Created on #{discussion.date.toDateString()}
            br
            br
            div#bodyText
                p #{discussion.body}

    footer
        div.wrapper
          a.hvr-grow(href="/discussions") Back to all threads
          span.hvr-grow(style="color:white;")   -  
          a.hvr-grow(href="/discussions/create") Start a thread

CSS 样式表(与显示文本区域输入的 p 相关)

#bodyText
{
    font-size: 0.75em;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    max-width: 960px;
}

#bodyText p
{
    white-space: pre;
} 

我的文字像这样溢出:http://puu.sh/hC9ba/c7d7984e58.jpg

它不应该这样做。我期待任何建议或提示。

Answer 1

尝试使用 white-space: pre-line 而不是 word-wrap: pre