在一个固定宽度的 div 中包含一个带有“white-space: pre;”的文本答案

【问题标题】：Containing a text within a fixed-width div with "white-space: pre;"在一个固定宽度的 div 中包含一个带有“white-space: pre;”的文本
【发布时间】：2015-07-15 00:52:20
【问题描述】：

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

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

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

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

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

此视图的翡翠代码：

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 样式表（与来自 textarea 的输入显示的 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

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

【问题讨论】：

您是否尝试过 pre-line 而不是 pre？
Pre-line 和“pre-wrap”一样，解决了！谢谢大家的 swift cmets
如果你解决了你的问题，然后发布作为帮助他人的答案

标签： css node.js express views pug

【解决方案1】：

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

【讨论】：

【解决方案2】：

你试过自动换行吗？

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

【讨论】：

这会中断但不会保留空格（换行符）。

【解决方案3】：

对我来说这个答案的解决方案是：

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

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

【讨论】：