textarea文本支持换行展示

最新推荐文章于 2023-06-06 09:25:53 发布

-祖国的花朵-

最新推荐文章于 2023-06-06 09:25:53 发布

阅读量902

点赞数

分类专栏： vue 前端 css 文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_42857986/article/details/123795668

版权

vue 同时被 3 个专栏收录

7 篇文章

订阅专栏

前端

6 篇文章

订阅专栏

css

5 篇文章

订阅专栏

要展示的地方 css 关键属性white-space: pre-wrap;

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

-祖国的花朵-

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

如何在textarea文本输入区内实现换行

09-28

本文为大家介绍下如何在textarea文本输入区内实现换行，下面有个不错的示例，大家可以参考下，希望对大家有所帮助

textarea换行符

01-10

textarea换行符在textarea中输入回车符在js读取textarea中的值有\r\n然后到业务层转换到string中就有可能变成空格形式然后被存入数据库，当在取出此值的时候则会变成空格的形式,因此我们需要将不显示的\r\n替换一下。

参与评论您还未登录，请先登录后发表或查看评论

textarea换行符的显示

zuochanjuan的专栏

06-15

343

插入数据： function formSubmit(){ var temp=$("#content").val().replace(/\n/g," "); //将换行符转为 $("#content").val(temp); $('#relatedForm').submit(); } 更新数据 $(document)...

textarea默认文字换行显示、禁止拉伸设置

weixin_72972487的博客

06-06

2289

textarea默认文字换行显示，禁止拉伸设置

textarea提示文字换行显示

czp555的博客

11-20

2564

页面展示效果如下所示：

Web前端之textarea文本域标签元素、回车与换行符介绍、禁止事件冒泡、清除、清空、重置、赋值、stopPropagation、querySelector、innerHTML、replace、br

06-01

1万+

Web前端之textarea文本域标签元素、回车与换行符介绍、禁止事件冒泡、清除、清空、重置、赋值、stopPropagation、querySelector、innerHTML、replace、br

textarea实现空格、换行功能

九段刀客的博客

06-10

1168

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <textarea name="" i.

textarea添加支持输入换行功能

nunumaymax的博客

11-01

3364

textarea添加支持输入换行功能概要js部分的处理html部分的渲染处理概要 textarea标签本身是并不支持识别换行功能的，只支持输入空格的功能，但是有的时候需要支持换行功能，这时就需要我们利用换行符\n 和br标签的转换进行处理。 js部分的处理在textarea中输入换行时，换行符是 \n；在HTML页面中显示换行时，使用的是 br标签；所以我们解决这个问题的思路也很简单，...

textarea显示的时候包含换行

weixin_44959346的博客

03-10

479

textarea在获取的时候显示换行

textarea 换行显示引发对 white-space属性的测试

Zakero

04-30

1073

项目打算用 textarea 显示BO取来的文本数据. 规定：BO文本数据有/r才换行。 overflow:scroll 显示横纵滚动条。简单不做细述 word-wrap 和 word-break 这篇文章说的非常明白： http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html 感谢好人，好人一生

HTML里面Textarea换行问题总结

12-11

最近碰到一个数据转来转去转到Textrea里面是否能真正按行存放的问题，在这里总结一下：问题描述：比如get数据到一个TextArea里面，如“AAA BBB”，想把这段文字在TextArea里面真正按行存放，而不是显示出来按行存放（所谓的真正按行存放就是，再把这个TextArea的数据post到另外一个页面的Textarea里面仍是按行存放）问题解决1：一开始是提交数据的时候格式是AAA BBB，但是这是显示换行，其实在TextArea里面并不是真正按行存放的，因为这个时候再提交给另外一个TextArea的时候就是显示AAABBB，而不是换行显示了，因此仅仅是显示按行存

关于textarea提交的内容无法换行的解决办法

09-05

本篇文章小编为大家介绍，关于textarea提交的内容无法换行的解决办法，有需要的朋友可以参考一下

TextArea换行数据回显页面不换行问题

So丶easy的博客

12-21

1831

TextArea换行数据回显页面不换行问题给回显控件上加： style = "white-space: pre-line; " 样式，不管是td、span等，就可以识别换行了。

textarea换行符转化

weixin_34375251的博客

03-10

161

代码 var getFormatCode=function(strValue){ return strValue.replace(/\r\n/g, ' ').replace(/\n/g, ' ').replace(/\s/g, ' '); } 复制代码

textarea中的默认内容强制换行显示

MrLiber的博客

07-07

1683

遇到这样的场景，需要将textarea内容设置为换行显示，如下图：我们知道 html中换行用 windows转译符换行常用\r \n（\n 是换行，\r是回车）然而这些并不起作用。现实中textarea并不支持html标签，textarea中使用以上的换行方法均会以原样输出，输入w3school.com.cn提供的%OD%OA方法也不行。后来找到一个有效的方法，要用
才可以有效实现强制换行，在此记录下来。 ...

关于在textarea输入换行内容保存到数据库，在页面显示换行效果

frankfan123的博客

04-12

5489

之前做一个textarea内容添加页面，要求能够换行，网上搜了搜是因为数据库自动把 替换成了\n,可以通过jquery替换回来，我试了试感觉没有效果，可能因为我是菜鸟。最后在一个相同问题的帖子下的回复里找到了合适的解决办法，加个<pre>标签就行了，它会保存换行符。虽然内容多了边框，不太好看，不过使用起来还是很简单的。...

textarea如何在展示时候显示多个空格和换行

01-29

2739

用textarea存储到的内容，在前端如果使用div展示的话，对于换行和多余的空格默认不展示。可以通过以下两种方式进行展示。

前端实现文本自动换行

白瑕的博客

08-08

9867

输入文本自动换行文章目录输入文本自动换行一、自嗨1.2.3.补全另一些textarea相关二、其他方法实现文本换行1.div可编辑模式总结一、自嗨扯皮,不正经向就是记录一下,没用过textarea,没甚麽好说的… 你被骗进来了哈哈(啊别打我) 1. 今天拿到老师出的题, 素材里有个图片是饱经沧桑の牛皮纸, 上面有画好的几条线我要做的就是允许用户往横线上写入文字. 其实前一天半夜就开始想,感觉弄个文本框就行了所以没想太多,结果今天早晨开工属实给我整不会了. 我一开始打算写个文本框,就像我昨晚想的那

textarea保存时的换行格式，如何显示在table中

shine1162226的博客

07-10

767

如图：保存的时候是有换行格式的当再显示在el-table中时,是没有换行的修改： <div class="table"> <el-table stripe @row-click="handleRowClick" row-key="id" :data="dutyLogList" height="100%"> <el-table-column width="180px" :label="$t('DutyLog.Create

textarea文本描述列表展示

最新发布

03-24

<think>好的，我需要帮助用户了解如何使用textarea展示文本描述列表。首先，用户的问题是关于在前端开发中使用textarea组件来显示文本描述列表，可能需要结合HTML和相关框架的代码示例。首先，我应该回顾用户提供的引用内容。引用[2]中提到了使用hxml文件中的textarea组件，并展示了如何设置占位符样式和事件处理。引用[3]提到了placeholder文本样式和文本对齐的参数。这些引用可能涉及到HarmonyOS的开发，因为提到了ohos.promptAction模块，这可能是鸿蒙系统的API。接下来，我需要确定用户的具体需求。用户想要展示的是一个文本描述列表，这可能是一个包含多个条目的列表，每个条目有标题和描述。通常，textarea用于多行文本输入，但用户可能希望将其用于显示只读的列表内容，这时候需要设置只读属性，并正确格式化内容。考虑到在鸿蒙应用开发中使用textarea，可能需要结合HML、CSS和JS。根据引用[2]，示例中的textarea有设置placeholder，但用户需要的是展示列表，可能需要将列表内容绑定到textarea的value属性，并且设置只读模式。此外，可能需要用换行符分隔各个条目，或者在JS中动态生成格式化的文本。我需要提供一个示例代码，展示如何将描述列表的数据结构（比如数组）转换为文本，并显示在textarea中。例如，在JS中将数组映射成带有标题和描述的字符串，每个条目用换行符分隔。同时，设置textarea为只读，并调整样式如placeholder-color（但此时placeholder可能不适用，因为内容不是占位符），可能需要设置普通的字体颜色和背景。还要注意，在鸿蒙的HML中，textarea的extend属性设置为true可能允许扩展，但需要确认是否正确。此外，可能需要使用CSS类来设置文本的样式，如字体大小、行高等，以确保多行内容显示合适。总结步骤： 1. 在HML中定义textarea组件，设置id和类，禁用编辑（可能需要readonly属性，但根据引用内容，需要确认支持的属性）。 2. 在JS中定义描述列表的数据，并格式化为字符串，用换行符分隔每个条目。 3. 将格式化后的字符串绑定到textarea的value属性。 4. 在CSS中设置textarea的样式，如字体颜色、背景色、行高等，确保美观。需要验证HarmonyOS中textarea是否支持value属性绑定，或者是否需要通过其他方式设置内容。根据引用[2]中的示例，onchange事件用于获取输入内容，但显示初始内容可能需要初始化时设置value。可能还需要处理文本的换行，比如使用\n作为换行符，并确保textarea正确显示换行。在CSS中设置white-space属性可能需要，但需查看鸿蒙支持的样式属性。最后，生成相关问题，帮助用户进一步了解相关主题，如样式调整、动态更新列表等。</think>### 如何用 textarea 展示文本描述列表在 HarmonyOS 应用开发中，可以通过以下步骤实现文本描述列表的展示： --- #### 1. **HML 文件定义 textarea 组件** 设置 `readonly` 属性禁止编辑，并通过数据绑定动态加载内容： ```html  <textarea id="descList" class="desc-textarea" readonly="true" value="{{descriptionText}}" placeholder="暂无描述" onchange="change" ></textarea> ``` --- #### 2. **JS 文件生成格式化文本** 将数组格式的描述列表转换为带序号的多行文本： ```javascript // index.js export default { data: { descriptionList: [ { title: "功能说明", content: "支持文本动态渲染" }, { title: "技术特性", content: "数据绑定与样式分离" }, { title: "使用场景", content: "配置信息展示" } ], descriptionText: "" }, onInit() { // 将数组转换为带格式的文本 this.descriptionText = this.descriptionList .map((item, index) => `${index + 1}. [${item.title}] ${item.content}`) .join('\n\n'); // 用两个换行符分隔条目 }, change(e) { console.log("当前内容：" + e.text); // 监听内容变化[^2] } } ``` --- #### 3. **CSS 文件设置样式** 优化文本展示效果： ```css /* index.css */ .desc-textarea { width: 90%; height: 300px; padding: 12px; font-size: 16px; placeholder-color: #999; /* 无内容时显示灰色提示[^3] */ color: #333; /* 正式文本颜色 */ background-color: #f8f8f8; line-height: 1.5em; /* 增强可读性 */ } ``` --- #### 实现效果 - 文本区域会显示： ``` 1. [功能说明] 支持文本动态渲染 2. [技术特性] 数据绑定与样式分离 3. [使用场景] 配置信息展示 ``` - 用户无法修改内容（`readonly="true"`） - 若无数据则显示"暂无描述"[^3] ---