div 内文本中的新行

2023-12-28

当我放置通过 ajax 调用加载的文本时,我遇到了一个小问题。

我从文本区域获取内容并将其存储在数据库中,当我想在 div 中显示文本时,它不尊重新行,因此所有文本都是连续的。

下面的代码展示了一个小例子:

$(function() {
    $('.buttonA').click(function() {
        $('.message').html($('textarea[name="mensaje"]').val());
    });
});
.message {
    width:300px;
    height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<textarea name="mensaje" class="new_message_textarea" placeholder="enter message..."></textarea>
<button class="buttonA">Enter</button>
<div class="message"></div>

如果您输入一些带有新行的文本,一旦单击按钮,文本就会显示到 div 中,并且不会显示新行。

我该如何解决这个问题?


我认为实现这一目标的更好方法是添加

white-space: pre

or

white-space: pre-wrap

适合您的风格div.

See: HTML - DIV 内容中的换行符可编辑吗? https://stackoverflow.com/questions/19038070/html-newline-char-in-div-content-editable

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

div 内文本中的新行 的相关文章

随机推荐

  • 如何在 iOS 上旋转自定义启动屏幕?

    我的启动屏幕可以正常工作 但我的应用程序可以在横向模式下运行 并且启动屏幕以默认的纵向模式显示 如何启动应用程序 以便启动屏幕像我的应用程序一样在横向模式之间旋转 我正在使用以下代码 BOOL shouldAutorotateToInter
  • 使用 MVVM 分配数据上下文的最佳方法是什么?

    我一直在寻找设置数据上下文属性的最佳方法 我找到了三种方法 在视图上分配数据上下文 在 XAML 或隐藏代码上 通过构造函数在 ViewModel 上分配数据上下文 使用一些配置来获取视图和视图模型引用 并通过一些基础结构类在运行时绑定数据
  • 滚动到 javascript 或 jquery 中具有特定 id 的 html 元素

    我有分配了 id 的 html 元素 现在我想滚动到这些元素 我看到 jQuery 有一个scrollTop 它接受一个整数值 我如何轻松地将带有 id 的特定 html 元素滚动到顶部 理想情况下 动画精美流畅 快速搜索显示了许多滚动插件
  • 如何使 ReactJS 应用程序在 AWS 上处于活动/可见状态

    我在AWS上开发了一个reactJS项目 前端 它有来自heroku的RESTFUL API 它们完全分离 即前端和后端 我已成功将文件上传到 S3 并激活了我的 CloudFront 发行版 但我无法真正找出问题所在 因为当我点击从域名生
  • 如何在 Bash 脚本中添加数字?

    我有这个 Bash 脚本 但在第 16 行遇到了问题 我如何获取第 15 行的先前结果并添加 它到第 16 行的变量 bin bash num 0 metab 0 for i 1 i lt 2 i do for j in ls output
  • Xcode应用程序运行问题

    我刚刚将 iPhone 5 更新至 iOS 版本 10 1 当我尝试在设备上运行我正在开发的应用程序时 我从 Xcode 收到以下错误 无法找到设备支持文件 这款 iPhone 5 型号 A1429 运行的是 iOS 10 1 14B72
  • 如何在参数化后运行拆卸功能/夹具

    我正在尝试运行拆卸函数 夹具来对一个测试用例进行整个参数化 所以我想在我的 conftest py 文件中有这样的东西 pytest fixture autouse True scope parametrization def parame
  • laravel eloquent 中的一对多关系

    早上好 我在 Eloquent 中的模型关系方面遇到了一些麻烦 我需要使用中间表链接这些文章的文章和图像 在中间表中 我想添加文章和图像的 id 并且我想检索属于一篇文章的所有图像 管理关系的最佳方法是什么 提前致谢 您不需要使用数据透视表
  • 在没有继承的情况下,如何重写类方法并从新方法中调用原始方法?

    我找到了一个成功覆盖的来源Time strftime像这样 class Time alias old strftime strftime def strftime do something old strftime end end 问题是
  • Jetpack Compose 如何删除 EditText/TextField 下划线并保留光标?

    您好 我需要删除文本字段中的下划线 因为当文本字段是圆形时它看起来很难看 我已将 activeColor 设置为透明 但光标不会显示 因为它是透明的 如何删除下划线 activeColor并保留光标 这是我的圆形文本字段代码 Composa
  • jQuery 和 ajax 在 PHP 中设置会话变量

    我在 PHP 中使用会话变量来管理多语言站点中的当前语言 为了实现我想要的 我使用了一个标志图标 当单击该图标时 jQuery 它会告诉 lang json php 将会话变量切换到新语言 我在 jQuery 方面没有收到错误 var se
  • 如何裁剪两幅图像的差异?

    我想拍这两张照片 基本上产生这个 我已经尽可能使用compare with fuzz定义已更改的部分 是否可以获取该区域的边界框并裁剪第二帧 我会按照这些思路做一些事情 convert a jpg b jpg colorspace gray
  • 附近连接 2.0:何时可以同时发布广告/发现?

    我目前正在尝试使用 P2P CLUSTER 策略同时进行广告和发现 我相信这应该有效 因为可用的文档 https developers google com nearby connections strategies表示 P2P CLUST
  • Visual Studio Code 中的 C++ IntelliSense 无法识别 C++ STL

    我在我的 Linux 笔记本电脑上使用 Visual Studio Code 我刚刚写了一个像这样的简单程序main cpp include
  • 警告:scalac:有一个弃用警告;使用 -deprecation 重新运行以获取详细信息

    请注意消息输出中的这一点 警告 scalac 有一个弃用警告 使用 deprecation 重新运行以获取详细信息 这是什么意思 我应该重新运行什么 我尝试重建和同步项目 但警告信息仍然存在 从命令行找到了解决方案 sbt set scal
  • 使用 wix 安装较新版本的 msi 时从程序和功能中删除程序

    我正在使用 WIX 创建安装程序 msi 当我安装较新版本的应用程序时 我的旧应用程序已安装在计算机上 然后它会删除旧版本的所有文件和程序集并放置较新版本的文件和程序集 但在控制面板的程序和功能中显示旧版本和新版本 我正在使用以下代码进行升
  • jQuery:检查下一个元素是否存在

    有没有办法检查下一个元素是否存在 检查我的代码 if people making of mask ul li current next li null alert Exists else alert Dont exists 我究竟做错了什么
  • 在 C++ 中通过 OpenCV 以非常小的步长平移图像

    我正在以非常小的步长进行图像翻译 例如按 1 1024 在列中翻译 考虑我有以下图像 我在 opencv 中使用 Mat 创建图像 类型为 CV 64F 255 0 0 0 现在 通过在 1 1024 列中进行翻译 我期望得到以下结果 25
  • Eclipse 不使用添加类路径变量中的 jar

    我添加了一个指向 jar 缓存的类路径变量 通过 eclipse 的构建路径 虽然此文件夹显示在 Eclipse 的文件夹视图中 但由于某种原因无法识别其中包含的 jar 例如 当我导入缓存中的 jar 中存在的类 以及添加的类路径变量 时
  • div 内文本中的新行

    当我放置通过 ajax 调用加载的文本时 我遇到了一个小问题 我从文本区域获取内容并将其存储在数据库中 当我想在 div 中显示文本时 它不尊重新行 因此所有文本都是连续的 下面的代码展示了一个小例子 function buttonA cl