【问题标题】:Carriage return showing on HTML code回车显示在 HTML 代码上
【发布时间】:2012-02-05 08:47:55
【问题描述】:

我不想问,但我不得不问。我有一个html代码。由于某种原因,回车被保存并显示在我的浏览器中。

<div class="module">
    <p>Some data 

    some data <strong> more data
    more data</strong> and even more data </p>
</div>

显然我希望这会显示:

一些数据一些数据更多数据更多数据甚至更多数据。

相反,该段落保留了回车/换行符。 我以为问题出在 Netbeans,所以我下载了 Notepad++,但问题仍然存在。谢谢

我应该补充一点,我在 Windows 机器、Apache WAMP 服务器上属于 CakePHP 的 .ctp 文件中使用它,并且该数据是显式 html,而不是由 php 回显。

我目前的班级样式如下:

.module{
     border: 1px solid   darkgrey;
     background-color: #F3F3F3;
     border-radius: 5px;
     padding:5px;
     margin-bottom: 1em;
     overflow:  auto;

}

我还添加了任何可能影响我的代码的适用样式,也许你们可以发现它。

body {

          margin: 0;
    padding: 0;
          font-family: 'Tahoma';
          letter-spacing: 1px;

}

p, ul, ol {
    margin-top: 0;
          line-height: 160%;

}

p{
          white-space: pre-wrap; /* css-3 */
          white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
          white-space: -pre-wrap; /* Opera 4-6 */
          white-space: -o-pre-wrap; /* Opera 7 */
          word-wrap: break-word; /* Internet Explorer 5.5+ */
}

p 标签上的空白样式我添加它是为了防止用户输入没有空格的长词作为打破页面的形式。

【问题讨论】:

  • 您的&lt;p&gt; 是否应用了任何样式? white-space 特别是?如果您能提供指向您网站的链接,那就太好了。
  • 这不会导致它,所以它一定是别的东西。您不能向我们提供指向您网站的链接吗?
  • 不,我正在本地主机上开发。

标签: html line-breaks newline


【解决方案1】:

确实在您的p 上有white-space:pre-wrap

你认为white-space:pre-wrap 做了什么?你想达到什么目的?

【讨论】:

  • 好的,就是这样。非常感谢。现在的任务是处理尝试输入 looooooooooooooooooooonng 单词而没有任何空格的用户。为了避免这种情况,我实际上已经这样做了。
  • 在这种情况下,您只需要最后一行 word-wrap: break-word;。删除white-space
  • word-wrap: break-word,当它起作用时,在不插入连字符的情况下任意断词,例如违反英语规则。应该考虑其他一些方法,但这取决于用户输入可能是什么,并且属于不同的问题。
  • @JukkaK.Korpela 你的意思是,就像要求用户在输入中输入软连字符一样?噗。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2019-07-13
  • 2011-07-26
  • 1970-01-01
  • 1970-01-01
  • 2016-01-24
  • 2017-11-02
相关资源
最近更新 更多