textarea等组件会保存换行格式提交到数据库,从数据库返回时携带\n,需要在父亲标签上添加下方样式即可解决换行问题
<div style="white-space: pre-line;">
XXXXX
回车换行的内容(\r\n)经常需要显示为HTML中的<br>,这时就需要做替换操作了。
如果只是简单的将字符串strObj调用replace()方法,则结果只替换第一个回车符,
问题不难,关键是得懂得运用正则表达式来操作!
文本中直接用 \n ,
无法换行,因为
html 不识别 \n,如果只是单纯的用 replace 把 \n
换成 <br/>,只能变成普通的字符串,也还是
无法换行。
解决方法有这么几种:
1. 用 inner
HTML = " ... " 或者 v-
html 来把 <br/> 识别为
html node
2. 在标签上套一个 <pre></pre>
3. 设置 css
两种方法的区别说明:
1,word-break:break-all 例如div宽400px,它的内容就会到400px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。
2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会
需求是:用户提交表单时屏蔽敏感词的功能。其中敏感词来自服务器端同一路径下的ciku.txt,敏感词通过”|”连接,例如”g|c|a”,提交表单时替换敏感词,更重要的是,需要保持表单文本域中用户输入的多个空格及换行的样式,并原样输出。php代码如下:
header(Content-type:text/html;charset=utf-8);
if($_POST){
$pattern = array(
'/ /', //半角下空格
'/ /', //全角下空格
'/\r\n/',//window 下换行符
\r 表示:回车符(ACSII:13 或0x0d),就是我们常说的硬回车(Enter)。
\n 表示:换行(ACSII:10 或0x0a),就是我们常说的软回车(Shift+Enter)。
在页面里这两个是看不到效果的.右键查看源文件可以看到代码换行
====================================...
转载于:HTML文章页面,识别不了换行问题的解决
后端返回的长串字符中是由换行符 ‘\n’的,但是前端展现该长串字符时却没有识别’\n’,挤在一行影响页面布局。
解决方案
查找相关资料后得到解决方案:CSS中由“white-space” 属性设置如何处理元素内的空白,设置元素的样式为white-space: pre-line即可解决问题。
注: 在React中这样设置该属性
<span style={{whiteSpace: 'pre-line'}} >
// ..
在HTML的<textarea>元素中,换行符是指文本内容中的换行符,它可以通过不同的方式来实现。
最常见的是使用"\n"或者"\r\n"作为换行符。在<textarea>中使用这些字符来分隔文本内容的不同行,可以按照用户输入的换行位置来显示。
另一种方式是使用"<br>"标签来实现换行。在文本内容中使用"<br>"标签,可以在显示时直接将其解析为换行显示。
而在CSS中,可以使用white-space属性来控制换行符的处理方式。比如,使用"white-space: pre-wrap;"可以将文本内容的换行符保留,并在显示时自动换行。
一些常见的情况下,也会处理一些特殊的换行符,比如连续的多个"\n"会被解析为一个单独的换行符。
总而言之,在HTML的<textarea>中,换行符的处理方式可以通过字符控制,也可以通过CSS的属性来控制,具体要根据实际需求来选择合适的方式。