包含固定宽度div中的文本，带有“white-space：pre;”

If the title is a little bit vague, allow me to explain.

如果标题有点模糊,请允许我解释一下。

I'm making a small Q&A app using NodeJS, MongoDB and Express.

我正在使用NodeJS,MongoDB和Express制作一个小型Q&A应用程序。

Currently I'm doing the layouting part using CSS.

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

I have a small textarea, in which you can submit text, after you click the submit button, you are redirected to a page displaying the data you just inputted through the forms.

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

However, the main body of the text overflows the max-width I set for the div, this happened after I added the "white-space: pre;" property to enable line breaks in the post. Before that, the text would stay within the 960px width I defined for the div, but there wouldn't be any line breaks.

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

Jade code for this view:

这个视图的玉代码:

extends layout

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

        h3 #{discussion.author}
            | &nbsp;-&nbsp;&nbsp;
            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;") &nbsp;&nbsp;-&nbsp;&nbsp;
          a.hvr-grow(href="/discussions/create") Start a thread

CSS stylesheet (Relevant to the p where the input from the textarea displays)

CSS样式表(与textarea输入显示的p相关)

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

#bodyText p
{
    white-space: pre;
}

My text overflows like so: http://puu.sh/hC9ba/c7d7984e58.jpg

我的文字溢出如下:http://puu.sh/hC9ba/c7d7984e58.jpg

It should not do this. I look forward to any suggestion or tip.

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

3 个解决方案

#1

Try white-space: pre-line instead of word-wrap: pre

尝试使用white-space:pre-line而不是自动换行:pre

#2

Have you tried word-wrap?

你尝试过自动换行吗?

#bodyText p
{
    word-wrap: break-word;
}

#3

The solution to this answer for me was using:

这个答案的解决方案是使用:

#bodyText p
{
    white-space: pre-wrap;
}

Thanks to everyone who answered and tried to help me out.

感谢所有回答并试图帮助我的人。

#1